ES6 模組匯入匯出的方式

export語法：

1. 分別暴露

語法：

// a1.js
// 變數暴露形式
export let abcStr = "string";
// 方法暴露形式
export function abcFun(){
    console.log(123);
}

2. 統一暴露

語法：

// a2.js
let abcStr = "string";
function abcFun(){
    console.log(123);
}
export {abcStr, abcFun}
// or user as change name
export {
    abcStr as newStr,
    abcFun as newFun
}
// 不能直接暴露方法名：
    // export abcFun; 錯誤
    // export {abcFun}; 正確

 

3. 預設關鍵字暴露

語法：

// a3.js
export default {
    abcStr: "string",
    abcFun: function(){
        console.log(123);
    }
}

import語法：

通用暴露形式，正對上面的三種export語法

語法：

// 這種方式通用引入上邊的三種匯出方式
import * as a1 from 'a1.js'
import * as a2 from 'a2.js'
import * as a3 from 'a3.js'
// 因為explorer匯出的是一個物件，所以使用可以通過：
let abcStr = a1.abcStr;
a1.abcFun();
 

使用結構複製的形式匯入

語法：

import {abcStr, abcFun} from 'a1.js';
// 因為上邊匯入第一個的時候已經使用了abcStr名詞所以下邊的需要改名 使用as關鍵字更改名稱
import {abcStr as abcStr1, abcFun as abcFun1} from 'a2.js';
// 匯入default 語法暴露檔案
import {default as abcFun3} from 'a3.js';

直接匯入

語法：

// 直接匯入default 語法暴露檔案，這種方式只能正對 default暴露語法
import abcFun3 from 'a3.js';

 

瀏覽器中使用模組語法

新版的chrome瀏覽器已經支援直接使用ES6模組語法具體使用方式如下：

1. 直接頁面script標籤中寫，需要在script標籤新增type="module"屬性：

<script type="module">
    import * as a1 from 'a1.js'
    import * as a2 from 'a2.js'
    import * as a3 from 'a3.js'
</script>

1. 引入外部js檔案，也需要在script標籤新增type="module"屬性：

// app.js
import * as a1 from 'a1.js'
import * as a2 from 'a2.js'
import * as a3 from 'a3.js'

<script type="module" src="app.js"></script>