1. 程式人生 > >webpack 匯出、匯入模組(及路徑)

webpack 匯出、匯入模組(及路徑)

參考:https://blog.csdn.net/xyphf/article/details/83411552 (下面的程式碼親測有效)

注:匯入的模組的方法,只有兩種方法  import 和 require() 。可以使用 import 匯入的基本都可以使用require匯入,export default方法匯出的,只能使用import匯入。webpack2.0以後基本都使用import的寫法

方案1:  export (這種方案可以把要匯出的一起匯出,也一個一個匯出)

匯出模組:

let run = function
() { console.log('run') } let say = function(){ console.log('say') } export {run, say} // 最後一起匯出

或 (除了這種匯出方式,其他的匯出方式,檔案有多個介面要暴露,都是匯出一個物件)

export let run = function () {  // 一項一項的匯出
  console.log('run')
}
export let say
= function(){ console.log('say') }

匯入模組:

import { run, say } from '../../api/test.js'

方案2:  export default (這種匯出方案,匯入時,只能使用一個變數去接收)

匯出模組:

let run = function () {
  console.log('run')
}
let say = function(){
  console.log('say')
}
export default {run, say}

匯入模組:

import test from '../../api/test.js'  //  匯入時,只能使用一個變數去接收,如這裡的 test

 方案3:  module.exports

匯出模組:

let run = function () {
  console.log('run')
}
let say = function(){
  console.log('say')
}
module.exports = {run, say}

匯入模組:

import { run, say } from '../../api/test.js'

 


匯入模組的路徑:一般匯入js檔案的路徑只有下面兩種路徑,基本不會使用   絕對路徑  和  根目錄路徑。

1、相對路徑 (這個是可行的)

2、npm 包 路徑 

注意:路徑在後面的一節不一定是檔名,也可能是資料夾的名稱。如:import router from './router',這個路徑 指向的是 rooter下面的  index.js檔案。