超簡單1分鐘瞭解 ES6 匯入匯出

GetFullStack發表於2018-04-07

命名匯入匯出（named exports)

變數

// 匯出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;
// 匯入
import { myVar1, myVar2, MY_CONST } from 'src/mylib';
複製程式碼

方法

// 匯出
export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
// 匯入
import { myFunc, myGeneratorFunc } from 'src/mylib';
複製程式碼

類

// 匯出
export class MyClass {
    ...
}
// 匯入
import { myFunc } from 'src/mylib';
複製程式碼

物件列出所有匯出內容

const MY_CONST = ...;
function myFunc() {
    ...
}
// 匯出
export { MY_CONST, myFunc };
// 匯入
import { MY_CONST, myFunc } from 'src/mylib';
複製程式碼

匯出改名

// 匯出
export { MY_CONST as THE_CONST, myFunc as theFunc };
// 匯入
import { THE_CONST, theFunc } from 'src/mylib';
複製程式碼

匯出從其他地方匯入的模組

export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';
複製程式碼

預設匯出(default export)

 //------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
複製程式碼

命名匯出結合預設匯出

// 匯出
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };
// 匯入
import _, { each } from 'underscore';
複製程式碼

default 的別名

// 相等
import { default as foo } from 'lib';
import foo from 'lib';
複製程式碼
//------ module1.js ------
export default 123;
// 相等
//------ module2.js ------
const D = 123;
export { D as default };
複製程式碼

僅支援靜態匯入匯出

//動態匯入
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}
//動態匯出
if (Math.random()) {
    exports.baz = ...;
}
複製程式碼

為什麼要這麼做，主要是兩點：

  • 效能，在編譯階段即完成所有模組匯入，如果在執行時進行會降低速度
  • 更好的檢查錯誤，比如對變數型別進行檢查

相關文章