ES6 import、export的寫法

大家都知道來到ES6版本，ES就原生支持JS Module的概念。

import和export的寫有哪些呢，我們看看

import:

import from 和 var 變量一樣，也會存在提升，這意味着可以在 import 之前用 import 進來的東西

import './xxx.js'; // 只會執行import的js文件，但是不會引入任何值

import a, {b, c} from './xxx.js'; // 等價於 import {default as a, b, c} from './xxx.js';

import * as xxx from './xxx.js'; // 作為一個整體加載，結果為{default: xxx, b: xxx, c: xxx}

export:

let a = 123;
function addA() {
    a++;
}

export default a;  // 等價於 export default 123，執行addA不會影響default

export {a as default}; // 想執行addA影響到default，只能用as把default作為a的別稱

export {a, addA}； // 等價於 export let a = 123; export functin addA(){...}

復合寫法：

export {a ,b} from './xxx.js';

// 等效於
import {a, b} from './xxx.js';
export {a, b};

// 整體輸出 值得注意的是 export *會把my_module的default給丟掉
export * from 'my_module';

import函數：

因為import xxx from 'xxx'的寫法是編譯時的語法，沒辦法動態加載

// 形如這樣的寫法是會報錯的
if (x === 2) {
  import MyModual from './myModual';
}

為了實現動態加載，我們又有了import函數，跟require相似，不過是異步的

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

推薦閱讀：Module的語法