webpack 匯出、匯入模組(及路徑)
阿新 • • 發佈:2018-11-26
參考: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檔案。