前端基礎進階（十五）：詳解 ES6 Modules

對於新人朋友來講，想要本身去搞定一個ES6開發環境並非一件容易的事情，由於構建工具的學習自己又是一個很是大的方向，咱們須要花費很多的時間才能掌握它。

好在慢慢的開始有大神提供了一些很是簡單易懂，學習成本很是低的解決方案來幫助你們學習。create-react-app就是這些解決方案中，我的認爲最簡單易懂的一種方式。

因此在學習ES6 modules以前，先跟你們介紹一下create-react-app的安裝與使用。

儘管 create-react-app的目的是用於開發react程序，可是咱們僅僅只用來學習ES6是再合適不過了。固然你也能夠藉助 vue-cli來學習，一樣十分簡單。

一、確保本身的本地環境已經安裝了node與npm

一般安裝的方式就是去node的官方網站下載安裝，在安裝node的時候，npm也會一塊兒被安裝。

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

二、安裝一個好用的命令行工具

在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/downloa...
• oh my zsh 主題選擇 https://github.com/robbyrusse...

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

這款工具的特點就是顏值高，第一感受就是驚豔，你們不妨一試。

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

三、安裝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來建立咱們的第一個項目。

找到一個你要存放項目的根目錄，假設叫作develop，運行如下指令。

> create-react-app es6app

create-react-app會自動幫助咱們在develop目錄下建立一個叫作es6app的文件夾，這就是咱們新建立的項目。

當項目建立完成以後，在命令行工具中，咱們會看到如圖所示的提示。這些提示告訴了咱們如何運行項目npm start ，如何打包項目npm run build等，這裏我就再也不贅述。

項目建立完畢以後，進入該文件夾。

> cd es6app

// 查看文件夾裏的內容
> ls

咱們會發現裏面有一個叫作package.json的文件，這個文件裏包含了項目所須要的全部依賴。當咱們第一次運行項目以前，還須要安裝該文件裏的依賴包。

> npm install

安裝完畢以後，咱們就能夠啓動該項目了。

> npm start

通常來講，啓動以後會自動在瀏覽器中打開。

create-react-app已經自動幫助咱們實現了熱更新，所以當咱們修改代碼時，瀏覽器會自動更新。固然，若是咱們僅僅只是修改頁面樣式時，熱更新將會很是方便，可是若是你正在進行單頁面的組件開發，可能熱更新可以提供的幫助很是有限。

四、認識項目

只要咱們按照構建工具的規則進行開發，那麼構建工具會自動幫助咱們將代碼進行整合，所以在該項目中開發時，咱們並不須要本身來使用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中隨便寫點代碼測試一下

const app = document.querySelector('#root')
app.innerHTML = '啊，所有被清空啦，準備工做終於作完了，能夠開始學習ES6啦'

那麼咱們就能夠在這個環境下學習ES6的全部知識了，固然也包括ES6 modules。

ES6 modules

1. 引入模塊

首先在src目錄下建立一個test.js，在test.js中咱們隨便乾點什麼簡單的事情便可。

// src/test.js
console.log('your 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中，咱們添加以下代碼

// 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 }則表示利用解析結構的語法，從整個返回對象中去取得對應的接口。輸出結果也就很清晰了。

這種方式仍是比較常見，好比咱們在使用react時，經常這樣使用：

import React, { Component } from 'react'

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

這裏咱們可以直接引入 react的緣由，是由於咱們將它安裝到了文件夾 node_modules中，該文件夾中安裝的全部模塊均可以這樣直接引用。例如咱們安裝一個jquery。

// 安裝jquery
> npm install jquery

而後在其餘模塊中就能夠直接引入

import $ from 'jquery'

這樣，咱們能夠和往常同樣使用jquery。
經過這樣方式，咱們還能夠擴展更多的庫，這就使得咱們這個開發環境不只僅可以用於react的開發，怎麼用，徹底取決與你本身。

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

一般來講，一個知識點，在徹底理解以前仍是有點難度的，可是理解以後就變得很是簡單，因此若是你在學習這個知識點時感受有點困難，也不要過於擔憂，多多動手嘗試，並在實踐中運用起來，相信很快就能掌握。

前端基礎進階系列目錄