ES6+ 模塊化

1. 前言

JavaScript 在設(shè)計(jì)之初主要用來開發(fā) Web 頁面的交互、動畫和表單驗(yàn)證等單一的功能，而且程序的體積很小，大多數(shù)都是獨(dú)立執(zhí)行的。隨著前端的發(fā)展 JavaScript 承接的功能越來越多，Node 的出現(xiàn)讓 JavaScript 可以作為一門后端開發(fā)語言，程序的復(fù)雜度瞬間提升，所以有必要提供一種將 JavaScript 程序拆分為可按需導(dǎo)入的單獨(dú)模塊的機(jī)制。Node 是 JavaScript 的先行者，它使用了 CommonJS 的規(guī)范來實(shí)現(xiàn)模塊化的。在 ES6 沒出來之前有很多模塊化的實(shí)踐，比較有名的有：CommonJS、AMD、CMD，每個(gè)規(guī)范都有自己獨(dú)立的思考。

隨著 ES6 模塊的發(fā)布，AMD 和 CMD 慢慢地淡出了我們的視野?，F(xiàn)在主要常見的場景是 Node 端還采用 CommonJS 規(guī)范，這是歷史原因。前端使用的是 ES6 module 規(guī)范，但是不能直接在前端使用，需要通過打包工具進(jìn)行編譯如：Webpack、Babel、Rollup 等。本文中我們將使用 Webpack 進(jìn)行模塊化編譯工具，源代碼放在 GitHub 上，僅供參考。

2. 環(huán)境搭建

現(xiàn)在的高級瀏覽器還能完全地支持 ES6 的模塊化，如何在瀏覽器中運(yùn)行 ES6 模塊呢？有兩種方式：

• 在瀏覽器中直接運(yùn)行 ES6 的模塊化，但是需要做一定的工作，不能像之前直接在本地瀏覽器中打開一個(gè) html 中引入 JS 文件；
• 使用 Webpack、rollup 等模塊化打包工具，html 引入編譯后的 js 文件。

這兩種方式各有優(yōu)缺點(diǎn)，第一種是原生的使用方式，瀏覽器兼容要求比較高，第二種使用的是第三方打包編譯工具可以很好地解決瀏覽器兼容問題，但是會有一定的學(xué)習(xí)成本，并且不能直接在瀏覽器中運(yùn)行，只能使用編譯后的文件。

2.1 瀏覽器運(yùn)行原生 ES6 模塊

使用瀏覽器運(yùn)行原生 ES6 模塊的源碼在 ES6-wiki 的 mjs 文件中，瀏覽器是不能直接運(yùn)行 ES6 模塊化的，需要做一些準(zhǔn)備工作。

首先，在引入 js 文件時(shí)需要定義 script 的類型：type="module" 。另外，js 文件的后綴不能使用 .js 了，需要使用 .mjs 。這樣還是不能在瀏覽器中運(yùn)行，還需要最后一步。模塊化會涉及到文件系統(tǒng)，而本地打開的 html 文件是沒有服務(wù)的，所以我們要使用 node 服務(wù)的方式打開 html 文件，這里我們使用 node 的包 http-server 可以在相應(yīng)的文件目錄中啟動 node 服務(wù)。安裝如下：

npm install --global http-server

安裝完啟動服務(wù)的工具還是會有問題，依然打不開，這是需要在瀏覽器中打開一些配置：瀏覽器地址欄輸入：chrome://flags/ 然后搜索 JavaScript 把 Experimental JavaScript 項(xiàng)選擇 Enabled 啟用狀態(tài)。如下圖。

到這里我們就把前期的工作做完了，如何打開 html 文件呢？在控制臺中進(jìn)入對應(yīng)的目錄中執(zhí)行：http-server 命令。本節(jié)的目錄在 ES6-wiki/packages/module/mjs 下。在瀏覽器打開控制臺返回的地址即可，本實(shí)例的地址是：http://127.0.0.1:8080/index.html

2.2 使用 Webpack

Webpack 是模塊化打包工具，它兼容現(xiàn)在很多模塊化加載方式，本節(jié)課程也主要使用 Webpack 的方式來學(xué)習(xí) ES6 的模塊化。Webpack 需要一定的學(xué)習(xí)成本可以在官網(wǎng) 上學(xué)習(xí)，這里就不進(jìn)行介紹了，下面給出 webpack.config.js 的配置如下：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 模版文件
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

3. 基本使用

ES6 的模塊化設(shè)計(jì)思想是盡量靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，只能在頂級作用域。模塊系統(tǒng)中，每個(gè)文件都是一個(gè)模塊，模塊之間都是相互獨(dú)立。在 ES6 模塊中自動采用 嚴(yán)格模式 ，不知道的同學(xué)可以去看看，對于學(xué)習(xí) JavaScript 語言有一定的幫助。

3.1 export/import

export 是導(dǎo)出語法，import 是導(dǎo)入語法?？聪旅娴膶?shí)例：

// a.js
export let x = 1;
export let y = 2;

// main.js
import {x, y} from './a.js';
console.log(x, y)

上面代碼中，a.js 文件中使用 export 導(dǎo)出 x 和 y 兩個(gè)變量，在 mian.js 文件中使用 import 進(jìn)行導(dǎo)入。a.js 中還可以使用對象的方式導(dǎo)出：

let a = 1;
let b = 2;
export {
	a,
  b,
}

從上面的 main.js 文件中可以看出，export 使用的是引用方式進(jìn)行導(dǎo)出的，導(dǎo)出的是一個(gè)接口，所以不能直接導(dǎo)出一個(gè)值。我們?nèi)缦聦?shí)例：

let a = 1;
export a;	// 編譯報(bào)錯(cuò)
// 正確的方式如下
Export let a = 1;

雖然使用 export 不能直接導(dǎo)出一個(gè)值，但是可以使用 export default 導(dǎo)出一個(gè)特定的值：

export default 100;

export 模塊導(dǎo)出的是一個(gè)接口，在模塊內(nèi)如果數(shù)據(jù)更新，則所依賴的地方的值都是最新的。

// a.js
let a = 1;
setInterval(() => {
  a++
})
export {
	a
}

// main.js
import { a } from './a.js';
setInterval(() => {
  consolog.log(a)
})

import 有聲明的特點(diǎn)，類似 var 的特點(diǎn)，可以實(shí)現(xiàn)變量提升，但是不能修改變量對應(yīng)的值。

// main.js
console.log(a)
import { a } from './a.js';
a = 100;	// 這樣賦值是錯(cuò)誤的

使用 export + from 命令的方式，提供了一種便捷的方式在當(dāng)前的模塊導(dǎo)出其他模塊的內(nèi)容，不能在當(dāng)前模塊下使用導(dǎo)出的變量。

// b.js
let a = 1;
let b = 2;
export {
	a,
  b,
}

// a.js
export {a,b} from './b.js';
export c = () => {}
// 等價(jià)于使用import 先導(dǎo)入，然后再使用 export 導(dǎo)出
import { a, b } from './b';
export {
	a,
  b,
}

// main.js
import {a, b, c} from './a.js'

export 和 import 命令規(guī)定要處于模塊頂層，一旦出現(xiàn)在塊級作用域內(nèi)，就會報(bào)錯(cuò)。

// a.js
{
	export let a = 1;
}

// main.js
{
  import { a } from './a';
}
//控制臺答應(yīng)錯(cuò)誤內(nèi)容： 'import' and 'export' may only appear at the top level

上面的代碼中 export 和 import 都放在塊級作用域中的，執(zhí)行時(shí)會報(bào)錯(cuò)，提升你 export 和 import 只能在頂級出現(xiàn)。

3.2 export default 命令

export default 命令用來導(dǎo)出模塊中默認(rèn)變量或方法，上面我們也提到了使用 export 導(dǎo)出的是一個(gè)對象不能導(dǎo)出一個(gè)值類型。

// a.js
export default 'imooc';
// main.js
import name from './a.js'
console.log(name);	// imooc

export default 命令聲明的函數(shù)可以是匿名的。

export default function () {
  console.log('imooc');
}
// 等價(jià)
function fn() {
  console.log('imooc');
}
export default fn;

也可以是一個(gè)類：

// a.js
export default class {
  constructor() {
    console.log('imooc')
  }
  // ...
}

// main.js
import A from './a';
const a = new A();
console.log(a)

開可以導(dǎo)出的是一個(gè)對象：

const obj = {
  name: 'imooc',
  getLession: function() {
		console.log('ES6 imooc'); 
  }
}
export default obj;

3.3 as 命令

as 命令是用來重命名的，在使用 import 命令導(dǎo)入時(shí)可以使用 as 來更改變量名。

// a.js
let a = 1;
let b = 2;

export {
	a,
  b,
}

// main.js
import { a, b as y } from './a';
console.log(a, y);	// 1,2

如果模塊中同時(shí)有 export default 導(dǎo)出和 export 導(dǎo)出時(shí)，在導(dǎo)入時(shí)可以使用 as 對默認(rèn)導(dǎo)出進(jìn)行重命名。

// a.js
let a = 1;
let b = 2;

export {
	a,
  b,
}

export default let c = 3;


// main.js
import { a, b, default as c } from './a'
// 等價(jià)于下面直接在外面進(jìn)行使用
import c, { a, b } from './a'

默認(rèn)導(dǎo)出的內(nèi)容也可以放在 export 導(dǎo)出的對象中，但是需要使用 as default 命令：

// a.js
let a = 1;
let b = 2;
let c = 'imooc';

export {
	a,
  b,
  c as default,	// 相當(dāng)于 export default 'imooc',給導(dǎo)出的對象增加一個(gè)default屬性
}

4. 小結(jié)

本節(jié)主要講解了 ES6 Module 的使用，通過對 export、import、default、as 命令的講解學(xué)習(xí)了 ES6 Module 的基本用法，基本上涵蓋了日常使用的場景。