對於新人朋友來說，想要自己去搞定一個ES6開發環境並不是一件容易的事情，因為構建工具的學習本身又是一個非常大的方向，我們需要花費不少的時間才能掌握它。
好在慢慢的開始有大神提供了一些非常簡單易懂，學習成本非常低的解決方案來幫助大家學習。create-react-app就是這些解決方案中，個人認為最簡單易懂的一種方式。
所以在學習ES6 modules之前，先跟大家介紹一下create-react-app的安裝與使用。
儘管
create-react-app的目的是用於開發react程式，但是我們僅僅只用來學習ES6是再合適不過了。當然你也可以藉助vue-cli來學習，同樣十分簡單。
1、確保自己的本地環境已經安裝了node與npm
通常安裝的方式就是去node的官方網站下載安裝，在安裝node的時候，npm也會一起被安裝。
下載地址： http://nodejs.cn/download/
2、安裝一個好用的命令列工具
在windows環境下，系統預設的cmd非常難用，所以我個人比較推薦大家使用git.bash 或者 cmder。
git 下載地址： https://git-scm.com/downloads
在git安裝目錄下會有一個bash工具，找到安裝目錄直接使用即可。
cmder下載地址： http://cmder.net/
在mac上就方便很多了，你可以直接使用系統自帶的terminal工具，就非常好用。但是一般我推薦大家使用iterm2，並安裝oh my zsh外掛。具體的配置大家可以自己去折騰，網上的教程應該足夠幫助你搞定這一切了。
- iterm2 下載地址 http://www.iterm2.com/downloads.html
- oh my zsh 主題選擇 https://github.com/robbyrussell/oh-my-zsh/wiki/External-themes
另外還強烈推薦一款超高顏值的終端工具 hyperTerm。
這款工具的特色就是顏值高，第一感覺就是驚豔，大家不妨一試。
- hyperTerm 下載地址 https://hyper.is/
3、安裝create-react-app
在命令列工具中使用檢視版本的方式確保node與npm都安裝好之後，我們就可以安裝create-react-app了。
|
1 2 3 4 5 |
> node -v // 輸出node版本號 > npm -v // 輸出npm版本號 |
使用npm全域性安裝create-react-app
|
1 |
> npm install create-react-app -g |
然後我們就可以使用create-react-app來建立我們的第一個專案。
找到一個你要存放專案的根目錄，假設叫做develop，執行以下指令。
|
1 |
> create-react-app es6app |
create-react-app會自動幫助我們在develop目錄下建立一個叫做es6app的資料夾，這就是我們新建立的專案。
當專案建立完成之後，在命令列工具中，我們會看到如圖所示的提示。這些提示告訴了我們如何執行專案npm start ，如何打包專案npm run build等，這裡我就不再贅述。
專案建立完畢之後，進入該資料夾。
|
1 2 3 4 |
> cd es6app // 檢視資料夾裡的內容 > ls |
我們會發現裡面有一個叫做package.json的檔案，這個檔案裡包含了專案所需要的所有依賴。當我們第一次執行專案之前，還需要安裝該檔案裡的依賴包。
|
1 |
> npm install |
安裝完畢之後，我們就可以啟動該專案了。
|
1 |
> npm start |
一般來說，啟動之後會自動在瀏覽器中開啟。
create-react-app已經自動幫助我們實現了熱更新，因此當我們修改程式碼時，瀏覽器會自動更新。當然，如果我們僅僅只是修改頁面樣式時，熱更新將會非常方便，但是如果你正在進行單頁面的元件開發，可能熱更新能夠提供的幫助非常有限。
4、認識專案
只要我們按照構建工具的規則進行開發，那麼構建工具會自動幫助我們將程式碼進行整合，因此在該專案中開發時，我們並不需要自己來使用script或者link標籤來引入js與css，所以認識create-react-app的規則就變得很重要。
初次建立的專案下，會有3個資料夾。
- node_modules
專案依賴包存放位置。當我們執行npm install安裝package.json中的依賴包時，該資料夾會自動建立，所有的依賴包會安裝到該資料夾裡。 - public
主要的作用是html入口檔案的存放。當然我們也可以存放其他公用的靜態資源，如圖片，css等。其中的index.html就是我們專案的入口html檔案 - src
元件的存放目錄。在create-react-app建立的專案中，每一個單獨的檔案都可以被看成一個單獨的模組，單獨的image，單獨的css，單獨js等，而所有的元件都存放於src目錄中，其中index.js則是js的入口檔案。雖然我們並沒有在index.html中使用script標籤引入他，但是他的作用就和此一樣。
當然，如果我們要進一步進行react的學習，那麼肯定需要了解多一點的規則，但是在學習react之前，我們還是先把ES6 modules的知識搞定在說吧，所以，接下來你要做的事情就是，刪掉src目錄裡的除了index.js之外的所有檔案，並清空index.js，我們從0開始學習ES6 modules。
為了確保程式仍然能夠正常執行，我們在index.js中隨便寫點程式碼測試一下
|
1 2 |
const app = document.querySelector('#root') app.innerHTML = '啊，全部被清空啦，準備工作終於做完了，可以開始學習ES6啦' |
那麼我們就可以在這個環境下學習ES6的所有知識了，當然也包括ES6 modules。
ES6 modules
1. 引入模組
首先在src目錄下建立一個test.js，在test.js中我們隨便乾點什麼簡單的事情即可。
|
1 2 |
// src/test.js console.log('your first module'); |
在index.js中通過import引入test.js，這是我們要學會的第一個語法
|
1 2 3 4 |
// 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中，我們新增如下程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 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會變成什麼樣子。
|
1 2 3 |
// src/test.js export const bar = () => {} export const zcar = 12345; |
儲存執行後，我們發現，index.js中的test物件並沒有變化，因為它僅僅等於export default丟擲的物件，因此，為了獲得模組test.js暴露的所有介面，我們得通過如下的方式。
|
1 2 |
// src/index.js import * as test from './test'; |
其中的 * 表示所有，這是比較常用的萬用字元，as表示別名，* as test的意思是將test.js暴露的所有介面組成的物件，命名為test。那麼我們在index.js中log出test，結果就如下。
如果大家還記得前面一篇文章裡，我所講的ES6解析結構的語法，那麼對於如下的用法相信就不難理解。
|
1 2 3 4 5 6 |
// 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 }則表示利用解析結構的語法，從整個返回物件中去取得對應的介面。輸出結果也就很清晰了。
這種方式還是比較常見，比如我們在使用react時，常常這樣使用：
|
1 |
import React, { Component } from 'react' |
它其實暗示了React的封裝方式，也暗示了我們應該如何去封裝我們的模組。
這裡我們能夠直接引入
react的原因，是因為我們將它安裝到了資料夾node_modules中，該資料夾中安裝的所有模組都可以這樣直接引用。例如我們安裝一個jquery。
|
1 2 |
// 安裝jquery > npm install jquery |
然後在其他模組中就可以直接引入
|
1 |
import $ from 'jquery' |
這樣，我們可以和往常一樣使用jquery。
通過這樣方式，我們還可以擴充套件更多的庫，這就使得我們這個開發環境不僅僅能夠用於react的開發，怎麼用，完全取決與你自己。
OK，ES6 模組的基礎語法大概就這些吧，他告訴了我們在ES6中，一個模組應該如何對外暴露介面與如何引入其他模組暴露的介面，這個知識點在實際開發中非常常用，因此雖然簡單，但是不得不掌握，這也是大家進一步學習react或者vue的基礎，主要的難點大概在於本地開發環境的折騰，如果你是初次折騰這些，可能會遇到一些小問題，所以一定要有一點耐心。
通常來說，一個知識點，在完全理解之前還是有點難度的，但是理解之後就變得非常簡單，所以如果你在學習這個知識點時感覺有點困難，也不要過於擔心，多多動手嘗試，並在實踐中運用起來，相信很快就能掌握。