對于新人朋友來說纸兔，想要自己去搞定一個ES6開發(fā)環(huán)境并不是一件容易的事情，因為構(gòu)建工具的學(xué)習(xí)本身又是一個非常大的方向，我們需要花費不少的時間才能掌握它盆偿。
好在慢慢的開始有大神提供了一些非常簡單易懂，學(xué)習(xí)成本非常低的解決方案來幫助大家學(xué)習(xí)准浴。create-react-app就是這些解決方案中事扭，個人認為最簡單易懂的一種方式。
所以在學(xué)習(xí)ES6 modules之前兄裂，先跟大家介紹一下create-react-app的安裝與使用句旱。
盡管
create-react-app的目的是用于開發(fā)react程序阳藻，但是我們僅僅只用來學(xué)習(xí)ES6是再合適不過了晰奖。當(dāng)然你也可以借助vue-cli來學(xué)習(xí)，同樣十分簡單腥泥。
1匾南、確保自己的本地環(huán)境已經(jīng)安裝了node與npm
通常安裝的方式就是去node的官方網(wǎng)站下載安裝，在安裝node的時候蛔外，npm也會一起被安裝蛆楞。
下載地址： http://nodejs.cn/download/
2、安裝一個好用的命令行工具
在windows環(huán)境下夹厌，系統(tǒng)默認的cmd非常難用豹爹，所以我個人比較推薦大家使用git.bash 或者 cmder。
git 下載地址： https://git-scm.com/downloads
在git安裝目錄下會有一個bash工具矛纹，找到安裝目錄直接使用即可臂聋。
cmder下載地址： http://cmder.net/
在mac上就方便很多了，你可以直接使用系統(tǒng)自帶的terminal工具或南，就非常好用孩等。但是一般我推薦大家使用iterm2，并安裝oh my zsh插件采够。具體的配置大家可以自己去折騰肄方，網(wǎng)上的教程應(yīng)該足夠幫助你搞定這一切了。
- 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了翼闽。
> node -v
// 輸出node版本號
> npm -v
// 輸出npm版本號
使用npm全局安裝create-react-app
> npm install create-react-app -g
然后我們就可以使用create-react-app來創(chuàng)建我們的第一個項目拾徙。
找到一個你要存放項目的根目錄，假設(shè)叫做develop感局，運行以下指令尼啡。
> create-react-app es6app
create-react-app會自動幫助我們在develop目錄下創(chuàng)建一個叫做es6app的文件夾暂衡，這就是我們新創(chuàng)建的項目。
當(dāng)項目創(chuàng)建完成之后崖瞭，在命令行工具中狂巢，我們會看到如圖所示的提示。這些提示告訴了我們?nèi)绾芜\行項目npm start 书聚，如何打包項目npm run build等唧领，這里我就不再贅述。
項目創(chuàng)建完畢之后雌续，進入該文件夾斩个。
> cd es6app
// 查看文件夾里的內(nèi)容
> ls
我們會發(fā)現(xiàn)里面有一個叫做package.json的文件，這個文件里包含了項目所需要的所有依賴驯杜。當(dāng)我們第一次運行項目之前受啥，還需要安裝該文件里的依賴包。
> npm install
安裝完畢之后鸽心，我們就可以啟動該項目了滚局。
> npm start
一般來說，啟動之后會自動在瀏覽器中打開顽频。
create-react-app已經(jīng)自動幫助我們實現(xiàn)了熱更新藤肢，因此當(dāng)我們修改代碼時，瀏覽器會自動更新糯景。當(dāng)然嘁圈，如果我們僅僅只是修改頁面樣式時，熱更新將會非常方便莺奸，但是如果你正在進行單頁面的組件開發(fā)丑孩，可能熱更新能夠提供的幫助非常有限。
4灭贷、認識項目
只要我們按照構(gòu)建工具的規(guī)則進行開發(fā)温学，那么構(gòu)建工具會自動幫助我們將代碼進行整合，因此在該項目中開發(fā)時甚疟，我們并不需要自己來使用script或者link標(biāo)簽來引入js與css仗岖，所以認識create-react-app的規(guī)則就變得很重要。
初次創(chuàng)建的項目下览妖，會有3個文件夾轧拄。
- node_modules
項目依賴包存放位置。當(dāng)我們運行npm install安裝package.json中的依賴包時讽膏，該文件夾會自動創(chuàng)建檩电，所有的依賴包會安裝到該文件夾里。 - public
主要的作用是html入口文件的存放。當(dāng)然我們也可以存放其他公用的靜態(tài)資源俐末，如圖片料按，css等。其中的index.html就是我們項目的入口html文件 - src
組件的存放目錄卓箫。在create-react-app創(chuàng)建的項目中载矿，每一個單獨的文件都可以被看成一個單獨的模塊，單獨的image烹卒，單獨的css闷盔，單獨js等，而所有的組件都存放于src目錄中旅急，其中index.js則是js的入口文件逢勾。雖然我們并沒有在index.html中使用script標(biāo)簽引入他，但是他的作用就和此一樣坠非。
當(dāng)然敏沉，如果我們要進一步進行react的學(xué)習(xí)，那么肯定需要了解多一點的規(guī)則炎码，但是在學(xué)習(xí)react之前，我們還是先把ES6 modules的知識搞定在說吧秋泳，所以潦闲，接下來你要做的事情就是，刪掉src目錄里的除了index.js之外的所有文件迫皱，并清空index.js歉闰，我們從0開始學(xué)習(xí)ES6 modules。
為了確保程序仍然能夠正常運行卓起，我們在index.js中隨便寫點代碼測試一下
const app = document.querySelector('#root')
app.innerHTML = '啊和敬，全部被清空啦，準(zhǔn)備工作終于做完了戏阅，可以開始學(xué)習(xí)ES6啦'
那么我們就可以在這個環(huán)境下學(xué)習(xí)ES6的所有知識了奕筐，當(dāng)然也包括ES6 modules舱痘。
ES6 modules
1. 引入模塊
首先在src目錄下創(chuàng)建一個test.js，在test.js中我們隨便干點什么簡單的事情即可离赫。
// src/test.js
console.log('your first module');
在index.js中通過import引入test.js芭逝，這是我們要學(xué)會的第一個語法
// src/index.js
import test from './test'
console.log(test);
-
import表示引入一個模塊， - test 我們暫時理解為引入模塊的名字渊胸，
- from表示從哪里引入
-
./test為./test.js的簡寫旬盯，表示將要引入模塊的路徑
引入這個動作執(zhí)行時，test.js中的代碼也執(zhí)行了胖翰。由于在test.js中并沒有對外暴露任何接口频丘，因此index.js中的test為一個空對象，那么對外暴露接口的方式泡态，則是我們要學(xué)習(xí)的第二個語法搂漠。
2. 對外提供接口
ES6 modules使用export關(guān)鍵字對外提供接口，在我們剛才創(chuàng)建的test.js中某弦，我們添加如下代碼
// 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對包暴露了一個對象。他的意思就是當(dāng)我們使用import test from './test'時靶壮，這個test對象就默認等于export default暴露的對象怔毛。
我們還可以在test.js中，僅僅通過export暴露幾個方法與屬性腾降，我們來看看index.js中test會變成什么樣子拣度。
// src/test.js
export const bar = () => {}
export const zcar = 12345;
保存運行后，我們發(fā)現(xiàn)螃壤，index.js中的test對象并沒有變化抗果，因為它僅僅等于export default拋出的對象，因此奸晴，為了獲得模塊test.js暴露的所有接口冤馏，我們得通過如下的方式。
// src/index.js
import * as test from './test';
其中的 * 表示所有寄啼，這是比較常用的通配符锯七，as表示別名细层，* as test的意思是將test.js暴露的所有接口組成的對象嫩与，命名為test晓避。那么我們在index.js中l(wèi)og出test，結(jié)果就如下乙帮。
如果大家還記得前面一篇文章里蚣旱，我所講的ES6解析結(jié)構(gòu)的語法碑幅，那么對于如下的用法相信就不難理解。
// 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 }則表示利用解析結(jié)構(gòu)的語法，從整個返回對象中去取得對應(yīng)的接口异吻。輸出結(jié)果也就很清晰了裹赴。
這種方式還是比較常見喜庞，比如我們在使用react時，常常這樣使用：
import React, { Component } from 'react'
它其實暗示了React的封裝方式棋返，也暗示了我們應(yīng)該如何去封裝我們的模塊延都。
這里我們能夠直接引入
react的原因，是因為我們將它安裝到了文件夾node_modules中睛竣，該文件夾中安裝的所有模塊都可以這樣直接引用晰房。例如我們安裝一個jquery。
// 安裝jquery
> npm install jquery
然后在其他模塊中就可以直接引入
import $ from 'jquery'
這樣射沟，我們可以和往常一樣使用jquery殊者。
通過這樣方式，我們還可以擴展更多的庫验夯，這就使得我們這個開發(fā)環(huán)境不僅僅能夠用于react的開發(fā)猖吴，怎么用，完全取決與你自己挥转。
OK海蔽，ES6 模塊的基礎(chǔ)語法大概就這些吧，他告訴了我們在ES6中绑谣，一個模塊應(yīng)該如何對外暴露接口與如何引入其他模塊暴露的接口党窜，這個知識點在實際開發(fā)中非常常用，因此雖然簡單域仇，但是不得不掌握刑然，這也是大家進一步學(xué)習(xí)react或者vue的基礎(chǔ)，主要的難點大概在于本地開發(fā)環(huán)境的折騰暇务，如果你是初次折騰這些，可能會遇到一些小問題怔软，所以一定要有一點耐心垦细。
通常來說，一個知識點挡逼，在完全理解之前還是有點難度的括改，但是理解之后就變得非常簡單，所以如果你在學(xué)習(xí)這個知識點時感覺有點困難家坎，也不要過于擔(dān)心嘱能，多多動手嘗試，并在實踐中運用起來虱疏，相信很快就能掌握惹骂。
