ES6模塊之export和import教程

一、ES6中的模塊
ES6中的模塊即使一個包含JS代碼的文件，在這個模塊中所有的變量都是對其他模塊不可見的，除非我們導出它。ES6的模塊系統大致分為導出（export）和導入（import）兩個模塊。
★在瀏覽器中直接使用es6模塊

• 顯示聲明type="module"
• script 里面要加 type="module", 這樣瀏覽器才會把相關的代碼當作ES6的module 來對待

  <script type="module"> 
  import {addTextToBody} from './utils.js';   //直接寫 'utils.js' 會報錯
      //你可以寫絕對路徑和相對路徑， 但是不能直接寫文件名，即使是同一層級下面的文件。也要加上 './utils.js'
      //文件名后綴 .js 必須要有，不然瀏覽器無法識別路徑。
  addTextToBody('Modules are pretty cool.'); 
  </script>

  ★使用webpack來進行模塊化開發
  只需在需要的地方使用export或者import，其他的都交給webpack進行處理，就不需要聲明什么type="module"了

二、導入的具體使用

場景1：只想導入源模塊的部分內容
假設a.js是以如下方式導出的

// a.js
export var num = 100
export var name = '王小明'

也可以是
var num = 100;
var name = '王小明';
export {num}
export {name}
export {num,name}
不可以是：export num 或者 export name，這種寫法需要加上{}，上面寫在一行的可以直接那樣寫

那么如果我們只需要a模塊的num，就應該按下面的方式導入它

// b.js
import {num} from './a.js'  //num必須加上{}，不可以直接是import num，.js后綴可省略
console.log(num) // 100

此處的模塊導入利用了ES6的解構方式

場景2：不滿意源模塊所導出的變量或方法的名稱，想要為它們另起名稱
假設a.js中有一個名稱如此晦澀的變量gddhauabsg

// a.js
export var gddhauabsg = 100

忍不住想要重命名這個變量的名稱，但是又無權或不想修改源模塊的話，那么不妨這么做

// b.js
// 如此，我們就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from './a.js'
console.log(num) // 100

場景3：想要把源模塊的所有導出都導入進來，但偏偏源模塊不是以export default方式導出的
假設a模塊將每個變量都單獨，且聲明時立即導出

// a.js
export var num = 100
export var name = '王小明'

那么我們就要這樣導入a的所有導出

// b.js
import * as moduleA from './a.js'
console.log(moduleA.num)  // 100
console.log(moduleA.name) // '王小明'

解釋一哈：*代表源模塊（除去export default）的所有導出的集合，該集合類似Object類型，*就相當于{num: 100, name: '王小明'}，所以在源模塊沒有使用export default導出時，我們就可以使用上面的方式導入源模塊的所有導出

場景4：源模塊并沒有對外暴露任何導出
a模塊沒有導出任何內容

// a.js
var arr = [1, 2, 3]
for (var i = 0;i < arr.length;i++) {
    console.log(arr[i])
}

那么b文件將a.js文件整個引入就好了

// b.js
// 此處會執行a.js的所有代碼邏輯
import './a.js'

那么有些童鞋可能會有個疑問“這種導入方式的應用場景在哪？”，不知道大家是否聽過'膩子腳本'這一概念，就是一些第三方腳本或工具，作用類似于補丁，用于兼容一些新特性或功能，在一般情況下，這些腳本或工具只需要自執行，并且通常都是在我們的業務代碼之前引入

三、導出的具體使用
ES6模塊的導出方式大致有兩種：命名導出、默認導出；

場景1：源模塊怎樣才能支持命名導入和命名空間導入？

// a.js
// 方式1：在源模塊末尾集中導出（當導出較多時，推薦此方式，方便管理導出）
var num = 100
var name = '王小明'
var flag = true
export {
    num,
    name,
    flag
}

// 方式2：聲明時立即導出（當導出較少時，推薦此方式）

export var num = 100
export var name = '王小明'
export var flag = true

場景2：導出的內容前后名稱需要不一致，那么我們可以嘗試重命名
什么意思呢？如果源模塊的開發者有下面這種想法時，就應該使用重命名導出：‘我想要提高代碼的可讀性且有較好的語義化，此時變量或方法的名稱長度一定不會太短，類似getOrderInfoFromDatabaseByHttp這種命名，但又不想讓使用我的模塊的人覺得我的導出名稱過長’，示例如下：

// a.js
// 名稱真的好長
var getOrderInfoFromDatabaseByHttp = function () {
    // ...
}
export {
    // 如果沒有重命名，就會導出下面這一大串
    // getOrderInfoFromDatabaseByHttp
    // 但如果使用了重命名，方法的名稱就會變得很簡潔，即getOrderInfo
    getOrderInfoFromDatabaseByHttp as getOrderInfo
}

場景3：模塊功能單一，并且只需要導出值，不需要具名，使用默認導出export default

// version.js
export default 'v1.0.0'
// index.js
import version from './version.js'  //直接是version，不是{version}，而且導入時的名字可以隨意取，不一定就是version

上面的代碼功能很簡單，只是導出項目的版本號，所以我們應該使用默認導出，而沒有必要像下面這樣寫：

// version.js
export var version = 'v1.0.0'
// index.js
import {version} from './version.js'
不是默認導出需要加{}，是默認導出就不需要加{}~~

四、總結
1、默認導出
export default (默認導出)，一個模塊里面只能有一個默認導出
注意： 使用export default 向外暴露的成員，可以使用任意的變量名稱來接收
注意： 在一個模塊中，使用export default 只允許向外暴露1次
注意： 在一個模塊中，可以同時使用 export default 和 export 向外暴露成員

const apikey="123key";
export default apikey;

引入模塊：
import kkkk from '路徑'；

2、命名導出
注意： 使用 export 向外暴露的成員，如果不是這種寫法export var num = 100，而是 var num = 100，export {num}，導出的時候模塊名也得加上{}，只能使用 { } 的形式來接收，這種形式，叫做 【按需導出】
注意： 使用export 可以向外暴露多個成員， 同時，如果某些成員，我們在 import 的時候，不需要，則可以 不在 {} 中定義
注意： 使用 export 導出的成員，必須嚴格按照 導出時候的名稱，來使用 {} 按需接收；
注意： 使用 export 導出的成員，如果 就想 換個 名稱來接收，可以使用 as 來起別名；

const apikey="123key";
const name="Marray";
function greet(name){
    console.log(name)
}
export {apikey,name,greet};//這種方式導出的模塊引入的時候必須是這個名稱，如下：
import {apikey,name,greet} from '路徑'

3、導出和引入模塊的時候都可以使用別名，如
export {apikey as key,name,greet};
當我們引入模塊的時候必須使用別名
import {key，name,greet} from '路徑'

五、筆記
1、es6環境下，一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。

2、在src目錄下，新建common文件夾，新建profile.js，現在我們在profile.js里面加入以下代碼

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export const SuccMsgCode=0;

等價于

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
const SuccMsgCode= 0;
export {firstName, lastName, year, SuccMsgCode};

es6會將，profile.js視為一個模塊，所以如果希望外部能訪問這三個變量，需要將其導出。但是應該優先考慮使用第二種寫法。因為這樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。

在src目錄下的main.js文件中 中加入以下代碼

import {firstName, lastName, year, SuccMsgCode} from 'common/profile';
console.log('firstName\t' + firstName);
console.log('lastName\t' + lastName);
console.log('year\t' + year);
console.log('SuccMsgCode\t' + SuccMsgCode);

就會看到firstName，lastName，year, SuccMsgCode正常輸出了，但是此種方法是作為變量導入導出的，所以名稱必須一致。除非使用 as 命令指定新的名稱，例如：

導入時指定別名（不推薦）

export {firstName, lastName, year, SuccMsgCode};
import {firstName, lastName, year, SuccMsgCode as SuccMsgCode1} from 'common/profile';
console.log('SuccMsgCode\t' + SuccMsgCode1);

我們看到SuccMsgCode1正常顯示‘Hello World！’

或者，導出時指定別名

export {firstName, lastName, year, SuccMsgCode as SuccMsgCode2 };
import {firstName, lastName, year, SuccMsgCode2} from 'common/profile';
console.log('SuccMsgCode \t' + SuccMsgCode2);

我們看到SuccMsgCode 正常顯示‘Hello World！’
還可以直接使用以下語法：export { import1 as name1, import2 as name2, …, nameN } from …;

我們建議直接使用此種語法，方便又直觀，一般不在import時做別名處理。

3、export 不僅能導出變量，還能導出函數和類
在profile.js中加入以下代碼：

export function multiply (x, y) {
  return x * y;
};

上面代碼對外輸出一個函數multiply。
在main.js 中加入以下代碼

import {multiply} from 'common/profile';
console.log('multiply\t' + multiply);

multiply函數被打印出來
如果將profile.js中的代碼修改為：

export multiply = function (x, y) {
  return x * y;
};

等價于

function multiply (x, y) {
  return x * y;
};
export {multiply};

4、默認導出 export default
如果將export 修改為 export default 則之前的導入導出變量皆不能使用，因為export default只允許export出現一次，而且在使用導出、導入時，不需要加{}，代碼如下

function multiply (x, y) {
  return x * y;
};
export default multiply;
import multiply from 'common/profile';

如果需要導出整個文件，可使用如下代碼

export default {
  data () {
    return {
      firstName: 'Michael'
    };
  },
  methods: {
    multiply (x, y) {
      return x * y;
    }
  }
};