ES6 import/export:模組匯入匯出方式
阿新 • • 發佈:2019-01-03
export
匯出語法
// default exports
export default 42;
export default {};
export default [];
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}
// variables exports
export var foo = 1;
export var foo = function () {};
export var bar; // lazy initialization
export let foo = 2;
export let bar; // lazy initialization
export const foo = 3;
export function foo () {}
export class foo {}
// named exports
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};
// exports from
export * from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";
示例:
1、export {function};
匯出一個函式
2、export const foo = 2 ;
匯出一個常量
3、export default myFunctionClass;
預設匯出,每個模組只有一個預設匯出,匯出的可以是一個函式,一個物件,一個類
import
匯入語法
// default imports
import foo from "foo";
import {default as foo} from "foo";
// named imports
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";
// glob imports
import * as foo from "foo";
// mixing imports
import foo, {baz as xyz} from "foo";
import * as bar, {baz as xyz} from "foo";
import foo, * as bar, {baz as xyz} from "foo";
示例
1、import name from 'my-module.js' ;
匯出整個模組到當前作用域,name作為接收該模組的物件名稱
2、import {moduleName} from 'my-module.js';
匯出模組中的單個成員moduleName
3、import {moduleName1,moduleName2} from 'my-module';
匯出模組中的多個成員moduleName1、moduleName2
4、import {moduleName as moduleAlias} from 'my-module';
5、import myDefault,{moduleName1,moduleName2} from 'my-module';
myDefault為my-module.js檔案default匯出項
注意事項
匯入語句只能作為模組頂層的語句出現,不能出現在 function 裡面或是 if 裡面
if(Math.random()>0.5){
import './module1.js'; // SyntaxError: Unexpected keyword 'import'
}
const import2 = (import './main2.js'); // SyntaxError
try{
import './module3.js'; // SyntaxError: Unexpected keyword 'import'
}catch(err){
console.error(err);
}
const moduleNumber = 4;
import module4 from `module${moduleNumber}`; // SyntaxError: Unexpected token
import 語句會被提升到檔案頂部執行,也就是說在模組初始化的時候所有的 import 都必須已經匯入完成
import './module1.js';
alert('code1');
import module2 from './module2.js';
alert('code2');
import module3 from './module3.js';
// 執行結果
module1
module2
module3
code1
code2
import 的模組名只能是字串常量,匯入的值也是不可變物件;比如說你不能 import { a } from ‘./a’ 然後給 a 賦值個其他什麼東西