摘要：一模塊化前端模塊化的好處都已經(jīng)被說(shuō)爛了，歸納為兩點(diǎn)避免全局變量污染有效的處理依賴關(guān)系終于引入了模塊的概念，最近學(xué)習(xí)了下，順便記下筆記。命名導(dǎo)出命名導(dǎo)出就是明確導(dǎo)出的變量名稱和值。其中表示導(dǎo)出模塊所有的命名輸出。

前端模塊化的好處都已經(jīng)被說(shuō)爛了，歸納為兩點(diǎn)：

避免全局變量污染

有效的處理依賴關(guān)系

ES2015終于引入了模塊的概念，最近學(xué)習(xí)了下，順便記下筆記。

借助Babel演示Demo。
創(chuàng)建個(gè)module目錄，并在該目錄里執(zhí)行：

npm init -y

然后安裝各種依賴：

npm install --save-dev babel-cli babel-preset-env babel-preset-es2015

接著創(chuàng)建.babelrc文件：

{
  "presets": [
      "es2015",
      "env"
      ]
}

修改package.json文件的"scripts"配置：

"scripts": {
    "build": "babel src --out-dir dist"
  }

最終的目錄結(jié)構(gòu)如：

一個(gè)文件定義一個(gè)模塊；

通過(guò)export語(yǔ)句導(dǎo)出該模塊輸出的變量。export語(yǔ)句有兩種語(yǔ)法格式：命名導(dǎo)出， 默認(rèn)導(dǎo)出。

命名導(dǎo)出就是明確導(dǎo)出的變量名稱和值。
在src目錄下創(chuàng)建math.js，index.js文件。
math.js內(nèi)容：

// Case 1: export后面跟變量輸出聲明語(yǔ)句
export var PI = 3.14;

// Case 2: export后面直接跟變量定義語(yǔ)句
export var add = function (x, y) { // 導(dǎo)出函數(shù)print
    return x + y;
}

這表示math.js模塊導(dǎo)出變量PI和add, 用NodeJS的模塊格式可表示為：

var PI = 3.14;
var add = function (x, y) { // 導(dǎo)出函數(shù)print
    return x + y;
}

module.exports.PI = PI; 
module.exports.add = add;

index.js內(nèi)容：

import * as Math from "./math.js"; // import是導(dǎo)入模塊，后面會(huì)說(shuō)。

console.log(Math.PI);
console.log(Math.add(1, 2));

然后執(zhí)行下面的命令進(jìn)行Babel轉(zhuǎn)換：

npm run build

如果沒(méi)有報(bào)錯(cuò)的化，那module目錄下應(yīng)該生成了dist子目錄，并且生成了index.js和math.js文件（先不要在意文件的內(nèi)容）。
然后在執(zhí)行命令：

node dist/index.js

看看輸出結(jié)果是否OK：

3.14
3

如果導(dǎo)出多個(gè)變量，可以采用簡(jiǎn)寫格式（調(diào)整math.js內(nèi)容）：

var PI = 3.14;
var add = function (x, y) { 
    return x + y;
}
export { PI, add }; // 簡(jiǎn)寫格式，統(tǒng)一列出需要輸出的變量

重復(fù)上述步驟中執(zhí)行npm和Node命令查看看輸出結(jié)果是否OK。
并且該簡(jiǎn)寫格式還可以對(duì)輸出的變量重命名，之前的都是模塊里聲明的變量名作為模塊導(dǎo)出的變量的名：
再次修改math.js

var PI = 3.14;

var add = function (x, y) { 
    return x + y;
}

export { PI, add as Add}; // 把輸出變量add重命名為Add（注意不用雙引號(hào)）

通過(guò)關(guān)鍵字as把輸出變量add重命名為Add，注意Add是個(gè)字面量，不是字符串不需要引號(hào)。同樣在導(dǎo)入math.js模塊的index.js模塊也要修改下：

import * as Math from "./math.js";

console.log(Math.PI);
console.log(Math.Add(1, 2)); // Add方法名稱改動(dòng)了。

命名導(dǎo)出需要同時(shí)制定導(dǎo)出的變量名稱和變量值，所以export語(yǔ)句后面跟的一般是變量輸出聲明語(yǔ)句塊，變量定義語(yǔ)句，不可以是表達(dá)式，因?yàn)楸磉_(dá)式只有值，沒(méi)有名字。

通過(guò)關(guān)鍵字default修飾export可以指定一個(gè)模塊的默認(rèn)輸出變量值（在導(dǎo)入模塊的默認(rèn)輸出時(shí)，不需要指定導(dǎo)出變量名稱，這個(gè)后面再說(shuō)）。

// Case 3 常量
export default 25; 

// Case 4 變量
var PI = 3.14;
export default PI 

// Case 5 函數(shù)
export default function add2( x, y) {
    return x + y;
}

注意

一個(gè)模塊最多只能有一個(gè)默認(rèn)導(dǎo)出;

默認(rèn)輸出可以視為名字是"default"的模塊輸出變量;

默認(rèn)導(dǎo)出后面可以是表達(dá)式，因?yàn)樗恍枰担?/p>

export語(yǔ)句必須在模塊作用域的最頂層，即export不可以出現(xiàn)在任意花括號(hào)內(nèi)，如函數(shù)語(yǔ)句里，子代碼塊里（控制語(yǔ)句）。

通過(guò)import語(yǔ)句導(dǎo)入外部模塊。對(duì)應(yīng)export語(yǔ)句的兩種導(dǎo)出方式（命名模塊導(dǎo)出和默認(rèn)模塊導(dǎo)出），import也分別存在兩種不同的模塊導(dǎo)入語(yǔ)法格式。

修改index.js:

import { PI, Add} from "./math.js";
console.log(PI);
console.log(Add(1, 2));

表示：導(dǎo)入math.js模塊里輸出的變量PI, Add，注意名稱必須要和math.js模塊的輸出變量一一對(duì)應(yīng)，否則就是undefined。
重新執(zhí)行npm和node命令看看輸出是否OK。
該格式還支持對(duì)導(dǎo)入的變量重命名：

import { PI as pi, Add as add} from "./math.js";

如果導(dǎo)入一個(gè)模塊所有命名輸出，可采用通配符"*:
修改index.js:

import * as Math from "./math.js"; // 此時(shí)必須通過(guò)as指定個(gè)別名
console.log(Math.PI);
console.log(Math.Add(1, 2));

表示導(dǎo)入模塊math.js所有命名輸出變量，并通過(guò)Math變量引用。

修改math.js:

var PI = 3.14;

var add = function (x, y) { 
    return x + y;
}

export { PI, add as Add}; // 簡(jiǎn)寫格式，統(tǒng)一列出需要輸出的變量

export default function say() { // 默認(rèn)輸出
    console.log("I am default export");
}

修改index.js:

import say  from "./math.js"; // 
say();

表示導(dǎo)入模塊math.js的默認(rèn)輸出，此時(shí)不可以用as重命名哦（因?yàn)槊挚梢匀我舛x）。

執(zhí)行命令查看輸出是否OK。

導(dǎo)入模塊默認(rèn)輸出的名字可以任意命名。

import say2  from "./math.js"; // 
say2();

如果同時(shí)導(dǎo)入模塊的命名輸出和默認(rèn)輸出，可采用格式：

import say, * as Math from "./math.js"; 
// OR
import say, { PI, Add } from "./math.js"; 

有個(gè)限制條件默認(rèn)導(dǎo)入一定放在命名導(dǎo)入前面，即不能寫成：

import * as Math, say from "./math.js"; 
// OR
import { PI, Add }, say from "./math.js"; 

同樣import語(yǔ)句也必須在模塊的最頂層作用域里，即import不可以出現(xiàn)在任意花括號(hào)內(nèi)，如函數(shù)語(yǔ)句里，子代碼塊里（控制語(yǔ)句）。

如果只導(dǎo)入一個(gè)模塊，但不引用模塊的輸出變量，可以簡(jiǎn)寫為：

import "./math.js"

此時(shí)只會(huì)出發(fā)模塊math.js的執(zhí)行。

模塊可以導(dǎo)出任何類型變量（引用變量和值變量），如果在模塊index.js里修改了模塊math.js導(dǎo)出的引用變量或者值變量，那會(huì)影響模塊math.js里的值么？
修改math.js:

var PI = 3.14;
var Person = {
    name: "Bob"
}

export { PI, Person}; 
export default function say() {
    console.log(`Person:${JSON.stringify(Person)}, PI:${PI}`)
}

修改index.js:

import say, * as Math from "./math.js"; 

say(); // 修改前
Math.Person = 12;
Math.PI = 0;
say(); // 修改后

執(zhí)行npm和node查看輸出：

從輸出可以看出雖然我們?cè)趇ndex.js模塊里修改了math.js模塊的導(dǎo)出變量，但并不會(huì)影響math.js里的值。

反過(guò)來(lái)想想，如果模塊math.js修改了其導(dǎo)出的引用變量或者值變量在，那會(huì)影響模塊index.js里的取值么？
修改math.js:

var Count = 0;
var increase =  function() {
    Count++;
}
var Person = {
    name: "Bob"
}
var changeName = function() {
    Person.name = "John";
}

export { Count, Person, increase, changeName}; 

修改index.js:

import say, * as Math from "./math.js"; 

console.log(`Person:${JSON.stringify(Math.Person)}, Count:${Math.Count}`);// 修改前
Math.increase();
Math.changeName();
console.log(`Person:${JSON.stringify(Math.Person)}, Count:${Math.Count}`);//  修改后

輸出：

從輸出可以看出只要math.js修改了導(dǎo)出值就會(huì)影響index.js的取值。

模塊的輸出變量（引用類型或者值類型）對(duì)其他引用模塊來(lái)說(shuō)都是只讀的

模塊修改了其輸出變量的值會(huì)影響其他引入模塊的取值。

了解了export和import的用法后，我們?cè)倏纯磂xport語(yǔ)句另一個(gè)語(yǔ)法規(guī)則：導(dǎo)出引入的模塊的變量。上面的例子里export語(yǔ)句都是導(dǎo)出模塊自身定義的變量，export還可以導(dǎo)模塊引入模塊的輸出。
在src目錄添加文件log.js:

export var Log = function(msg) {
    console.log(msg);
}
export default "I am log.js";

修改math.js:

var Count = 0;
var increase =  function() {
    Count++;
}
var Person = {
    name: "Bob"
}

var changeName = function() {
    Person.name = "John";
}

export { Count, Person, increase, changeName}; 
export default function say() {
    console.log(`Person:${JSON.stringify(Person)}, Count:${Count}`)
}
export * from "./log.js"; // 

修改index.js:

import say, * as Math from "./math.js"; 

Math.Log("hello"); // 該方法來(lái)之log.js模塊

查看下輸出是否OK。

其中“export * from "./log.js";”表示導(dǎo)出模塊log.js所有的命名輸出。等價(jià)于：

export { Log } from "./log.js";

注意:這種語(yǔ)法格式“export * from "./log.js";”不可以定義別名，而花括號(hào)的語(yǔ)法格式“export { Log } from "./log.js"”可以定義別名，即：

export { Log as log} from "./log.js"

怎么在math.js模塊里導(dǎo)出模塊log.js的默認(rèn)輸出呢？只能采用先導(dǎo)入，再導(dǎo)出方式：

import logName from "./log.js";
export { logName }

MDN export

MDN import

Babel 入門教程

Babel Learn ES2015

An Introduction To JavaScript ES6 Modules