ES6 modules 詳解

概述

歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙。

在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，后者用於瀏覽器。ES6 在語言標准的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。

ES6 模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。

下面介紹一下es6的簡單使用。

1. 引入模塊

首先在根目錄的src文件夾下創建一個test.js和index.js，在test.js中我們隨便干點什么簡單的事情即可。

// src/test.js
console.log('first module');

 

在index.js中通過import引入test.js，這是我們要學會的第一個語法

// src/index.js
import test from './test'

console.log(test);

 

• import表示引入一個模塊，
• test 我們暫時理解為引入模塊的名字，
• from表示從哪里引入
• ./test為./test.js的簡寫，表示將要引入模塊的路徑

引入這個動作執行時，test.js中的代碼也執行了。由於在test.js中並沒有對外暴露任何接口，因此index.js中的test為一個空對象，那么對外暴露接口的方式，則是我們要學習的第二個語法。

2. 對外提供接口

ES6 modules使用export關鍵字對外提供接口，在我們剛才創建的test.js中，我們添加如下代碼

   const num = 20;
    const arr = [1, 2, 3, 4];
    const obj = {
        a: 0,
        b: function() {}
    }
    const foo = () => {
        const a = 0;
        const b = 20;
        return a + b;
    }

    export default {
        num,
        arr,
        obj,
        foo
    }

 

在test.js中，我們使用export default對包暴露了一個對象。他的意思就是當我們使用import test from ‘./test’時，這個test對象就默認等於export default暴露的對象。

我們還可以在test.js中，僅僅通過export暴露幾個方法與屬性，我們來看看index.js中test會變成什么樣子。

// src/test.js
export const bar = () => {}
export const zcar = 12345;

 

保存運行后，我們發現，index.js中的test對象並沒有變化，因為它僅僅等於export default拋出的對象，因此，為了獲得模塊test.js暴露的所有接口，我們得通過如下的方式。

// src/index.js
import * as test from './test';

 

其中的 表示所有，這是比較常用的通配符，as表示別名， as test的意思是將test.js暴露的所有接口組成的對象，命名為test。那么我們在index.js中log出test，結果就如下。

 

 

如果大家對ES6解析結構的語法熟悉，那么對於如下的用法相信就不難理解。

/ src/index.js
import test, { bar, zcar } from './test';

console.log(test);
console.log('bar:', bar);
console.log('zcar:', zcar);

 

test，仍然表示為export default暴露的對象，而 { bar, zcar }則表示利用解析結構的語法，從整個返回對象中去取得對應的接口。輸出結果也就很清晰了。

 

 

這種方式還是比較常見，比如我們在使用vuex時，常常這樣使用：

import { mapMutations } from "Vuex";

 

它其實暗示了vuex的封裝方式，也暗示了我們應該如何去封裝我們的模塊。

這里我們能夠直接引入vuex的原因，是因為我們將它安裝到了文件夾node_modules中，該文件夾中安裝的所有模塊都可以這樣直接引用。例如我們安裝一個jquery。

// 安裝jquery
> npm install jquery 

然后在其他模塊中就可以直接引入

import $ from 'jquery'

 

這樣，我們可以和往常一樣使用jquery。
通過這樣方式，我們還可以擴展更多的庫，這就使得我們這個開發環境不僅僅能夠用於vue的開發，怎么用，完全取決與你自己。

結束語

ES6 模塊的基礎語法大概就這些吧，他告訴了我們在ES6中，一個模塊應該如何對外暴露接口與如何引入其他模塊暴露的接口，這個知識點在實際開發中非常常用，因此雖然簡單，但是不得不掌握，這也是大家進一步學習react或者vue的基礎，主要的難點大概在於本地開發環境的折騰，如果你是初次折騰這些，可能會遇到一些小問題，所以一定要有一點耐心。