詳解 ES6 Modules
詳解 ES6 Modules
對於新人朋友來說,想要自己去搞定一個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的基礎,主要的難點大概在於本地開發環境的折騰,如果你是初次折騰這些,可能會遇到一些小問題,所以一定要有一點耐心。
詳解 ES6 Modules