摘要：下載地址安裝一個(gè)好用的命令行工具在環(huán)境下，系統(tǒng)默認(rèn)的非常難用，所以我個(gè)人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎(chǔ)進(jìn)階系列目錄

對(duì)于新人朋友來(lái)說(shuō)，想要自己去搞定一個(gè)ES6開(kāi)發(fā)環(huán)境并不是一件容易的事情，因?yàn)闃?gòu)建工具的學(xué)習(xí)本身又是一個(gè)非常大的方向，我們需要花費(fèi)不少的時(shí)間才能掌握它。

好在慢慢的開(kāi)始有大神提供了一些非常簡(jiǎn)單易懂，學(xué)習(xí)成本非常低的解決方案來(lái)幫助大家學(xué)習(xí)。create-react-app就是這些解決方案中，個(gè)人認(rèn)為最簡(jiǎn)單易懂的一種方式。

所以在學(xué)習(xí)ES6 modules之前，先跟大家介紹一下create-react-app的安裝與使用。

盡管create-react-app的目的是用于開(kāi)發(fā)react程序，但是我們僅僅只用來(lái)學(xué)習(xí)ES6是再合適不過(guò)了。當(dāng)然你也可以借助vue-cli來(lái)學(xué)習(xí)，同樣十分簡(jiǎn)單。

1、確保自己的本地環(huán)境已經(jīng)安裝了node與npm

通常安裝的方式就是去node的官方網(wǎng)站下載安裝，在安裝node的時(shí)候，npm也會(huì)一起被安裝。

下載地址： http://nodejs.cn/download/

2、安裝一個(gè)好用的命令行工具

在windows環(huán)境下，系統(tǒng)默認(rèn)的cmd非常難用，所以我個(gè)人比較推薦大家使用git.bash 或者 cmder。

git 下載地址： https://git-scm.com/downloads
在git安裝目錄下會(huì)有一個(gè)bash工具，找到安裝目錄直接使用即可。

cmder下載地址： http://cmder.net/

在mac上就方便很多了，你可以直接使用系統(tǒng)自帶的terminal工具，就非常好用。但是一般我推薦大家使用iterm2，并安裝oh my zsh插件。具體的配置大家可以自己去折騰，網(wǎng)上的教程應(yīng)該足夠幫助你搞定這一切了。

iterm2 下載地址 http://www.iterm2.com/downloa...

oh my zsh 主題選擇 https://github.com/robbyrusse...

另外還強(qiáng)烈推薦一款超高顏值的終端工具 hyperTerm。

這款工具的特色就是顏值高，第一感覺(jué)就是驚艷，大家不妨一試。

hyperTerm 下載地址 https://hyper.is/

3、安裝create-react-app

在命令行工具中使用查看版本的方式確保node與npm都安裝好之后，我們就可以安裝create-react-app了。

> node -v
// 輸出node版本號(hào)

> npm -v
// 輸出npm版本號(hào)

使用npm全局安裝create-react-app

> npm install create-react-app -g

然后我們就可以使用create-react-app來(lái)創(chuàng)建我們的第一個(gè)項(xiàng)目。

找到一個(gè)你要存放項(xiàng)目的根目錄，假設(shè)叫做develop，運(yùn)行以下指令。

> create-react-app es6app

create-react-app會(huì)自動(dòng)幫助我們?cè)赿evelop目錄下創(chuàng)建一個(gè)叫做es6app的文件夾，這就是我們新創(chuàng)建的項(xiàng)目。

當(dāng)項(xiàng)目創(chuàng)建完成之后，在命令行工具中，我們會(huì)看到如圖所示的提示。這些提示告訴了我們?nèi)绾芜\(yùn)行項(xiàng)目npm start ，如何打包項(xiàng)目npm run build等，這里我就不再贅述。

項(xiàng)目創(chuàng)建完畢之后，進(jìn)入該文件夾。

> cd es6app

// 查看文件夾里的內(nèi)容
> ls

我們會(huì)發(fā)現(xiàn)里面有一個(gè)叫做package.json的文件，這個(gè)文件里包含了項(xiàng)目所需要的所有依賴。當(dāng)我們第一次運(yùn)行項(xiàng)目之前，還需要安裝該文件里的依賴包。

> npm install

安裝完畢之后，我們就可以啟動(dòng)該項(xiàng)目了。

> npm start

一般來(lái)說(shuō)，啟動(dòng)之后會(huì)自動(dòng)在瀏覽器中打開(kāi)。

create-react-app已經(jīng)自動(dòng)幫助我們實(shí)現(xiàn)了熱更新，因此當(dāng)我們修改代碼時(shí)，瀏覽器會(huì)自動(dòng)更新。當(dāng)然，如果我們僅僅只是修改頁(yè)面樣式時(shí)，熱更新將會(huì)非常方便，但是如果你正在進(jìn)行單頁(yè)面的組件開(kāi)發(fā)，可能熱更新能夠提供的幫助非常有限。

4、認(rèn)識(shí)項(xiàng)目

只要我們按照構(gòu)建工具的規(guī)則進(jìn)行開(kāi)發(fā)，那么構(gòu)建工具會(huì)自動(dòng)幫助我們將代碼進(jìn)行整合，因此在該項(xiàng)目中開(kāi)發(fā)時(shí)，我們并不需要自己來(lái)使用script或者link標(biāo)簽來(lái)引入js與css，所以認(rèn)識(shí)create-react-app的規(guī)則就變得很重要。

初次創(chuàng)建的項(xiàng)目下，會(huì)有3個(gè)文件夾。

node_modules

項(xiàng)目依賴包存放位置。當(dāng)我們運(yùn)行npm install安裝package.json中的依賴包時(shí)，該文件夾會(huì)自動(dòng)創(chuàng)建，所有的依賴包會(huì)安裝到該文件夾里。

public

主要的作用是html入口文件的存放。當(dāng)然我們也可以存放其他公用的靜態(tài)資源，如圖片，css等。其中的index.html就是我們項(xiàng)目的入口html文件

src

組件的存放目錄。在create-react-app創(chuàng)建的項(xiàng)目中，每一個(gè)多帶帶的文件都可以被看成一個(gè)多帶帶的模塊，多帶帶的image，多帶帶的css，多帶帶js等，而所有的組件都存放于src目錄中，其中index.js則是js的入口文件。雖然我們并沒(méi)有在index.html中使用script標(biāo)簽引入他，但是他的作用就和此一樣。

當(dāng)然，如果我們要進(jìn)一步進(jìn)行react的學(xué)習(xí)，那么肯定需要了解多一點(diǎn)的規(guī)則，但是在學(xué)習(xí)react之前，我們還是先把ES6 modules的知識(shí)搞定在說(shuō)吧，所以，接下來(lái)你要做的事情就是，刪掉src目錄里的除了index.js之外的所有文件，并清空index.js，我們從0開(kāi)始學(xué)習(xí)ES6 modules。

為了確保程序仍然能夠正常運(yùn)行，我們?cè)趇ndex.js中隨便寫(xiě)點(diǎn)代碼測(cè)試一下

const app = document.querySelector("#root")
app.innerHTML = "啊，全部被清空啦，準(zhǔn)備工作終于做完了，可以開(kāi)始學(xué)習(xí)ES6啦"

那么我們就可以在這個(gè)環(huán)境下學(xué)習(xí)ES6的所有知識(shí)了，當(dāng)然也包括ES6 modules。

1. 引入模塊

首先在src目錄下創(chuàng)建一個(gè)test.js，在test.js中我們隨便干點(diǎn)什么簡(jiǎn)單的事情即可。

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

在index.js中通過(guò)import引入test.js，這是我們要學(xué)會(huì)的第一個(gè)語(yǔ)法

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

console.log(test);

import表示引入一個(gè)模塊，

test 我們暫時(shí)理解為引入模塊的名字，

from表示從哪里引入

./test為./test.js的簡(jiǎn)寫(xiě)，表示將要引入模塊的路徑

引入這個(gè)動(dòng)作執(zhí)行時(shí)，test.js中的代碼也執(zhí)行了。由于在test.js中并沒(méi)有對(duì)外暴露任何接口，因此index.js中的test為一個(gè)空對(duì)象，那么對(duì)外暴露接口的方式，則是我們要學(xué)習(xí)的第二個(gè)語(yǔ)法。

2. 對(duì)外提供接口

ES6 modules使用export關(guān)鍵字對(duì)外提供接口，在我們剛才創(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對(duì)包暴露了一個(gè)對(duì)象。他的意思就是當(dāng)我們使用import test from "./test"時(shí)，這個(gè)test對(duì)象就默認(rèn)等于export default暴露的對(duì)象。

我們還可以在test.js中，僅僅通過(guò)export暴露幾個(gè)方法與屬性，我們來(lái)看看index.js中test會(huì)變成什么樣子。

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

保存運(yùn)行后，我們發(fā)現(xiàn)，index.js中的test對(duì)象并沒(méi)有變化，因?yàn)樗鼉H僅等于export default拋出的對(duì)象，因此，為了獲得模塊test.js暴露的所有接口，我們得通過(guò)如下的方式。

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

其中的 * 表示所有，這是比較常用的通配符，as表示別名，* as test的意思是將test.js暴露的所有接口組成的對(duì)象，命名為test。那么我們?cè)趇ndex.js中l(wèi)og出test，結(jié)果就如下。

如果大家還記得前面一篇文章里，我所講的ES6解析結(jié)構(gòu)的語(yǔ)法，那么對(duì)于如下的用法相信就不難理解。

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

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

test，仍然表示為export default暴露的對(duì)象，而 { bar, zcar }則表示利用解析結(jié)構(gòu)的語(yǔ)法，從整個(gè)返回對(duì)象中去取得對(duì)應(yīng)的接口。輸出結(jié)果也就很清晰了。

這種方式還是比較常見(jiàn)，比如我們?cè)谑褂胷eact時(shí)，常常這樣使用：

import React, { Component } from "react"

它其實(shí)暗示了React的封裝方式，也暗示了我們應(yīng)該如何去封裝我們的模塊。

這里我們能夠直接引入react的原因，是因?yàn)槲覀儗⑺惭b到了文件夾node_modules中，該文件夾中安裝的所有模塊都可以這樣直接引用。例如我們安裝一個(gè)jquery。

// 安裝jquery
> npm install jquery

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

import $ from "jquery"

這樣，我們可以和往常一樣使用jquery。
通過(guò)這樣方式，我們還可以擴(kuò)展更多的庫(kù)，這就使得我們這個(gè)開(kāi)發(fā)環(huán)境不僅僅能夠用于react的開(kāi)發(fā)，怎么用，完全取決與你自己。

OK，ES6 模塊的基礎(chǔ)語(yǔ)法大概就這些吧，他告訴了我們?cè)贓S6中，一個(gè)模塊應(yīng)該如何對(duì)外暴露接口與如何引入其他模塊暴露的接口，這個(gè)知識(shí)點(diǎn)在實(shí)際開(kāi)發(fā)中非常常用，因此雖然簡(jiǎn)單，但是不得不掌握，這也是大家進(jìn)一步學(xué)習(xí)react或者vue的基礎(chǔ)，主要的難點(diǎn)大概在于本地開(kāi)發(fā)環(huán)境的折騰，如果你是初次折騰這些，可能會(huì)遇到一些小問(wèn)題，所以一定要有一點(diǎn)耐心。

通常來(lái)說(shuō)，一個(gè)知識(shí)點(diǎn)，在完全理解之前還是有點(diǎn)難度的，但是理解之后就變得非常簡(jiǎn)單，所以如果你在學(xué)習(xí)這個(gè)知識(shí)點(diǎn)時(shí)感覺(jué)有點(diǎn)困難，也不要過(guò)于擔(dān)心，多多動(dòng)手嘗試，并在實(shí)踐中運(yùn)用起來(lái)，相信很快就能掌握。

前端基礎(chǔ)進(jìn)階系列目錄