es6專案構建01

一、使用的技術

es6 + node + gulp + babel +webpack、webpack-stream

二、技術介紹

es6：

node：

express：node框架

gulp：任務自動化，

babel：編譯工具

webpack：模組化

webpack-stream ：處理gulp

三、環境搭建

（1）node環境搭建（windows系統下）

2. 根據系統位數、選擇msi版（安裝簡單）安裝，如下圖

3.一路下一步進行安裝

4.檢查安裝，在cmd命令下輸入node -v命令顯示如下，表明安裝成功。

（2）安裝express框架

2.將express使用安裝器裝載起來用於建立新**環境，目的是使用express命令。在cmd下輸入npm -g express-generator命令，如下圖表示命令執行成功：

3.檢查安裝，在cmd命令下輸入express -v命令顯示如下，表明安裝成功。

（3）通過npm安裝gulp

在cmd下輸入npm install gulp -g命令（全域性安裝）進行安裝即可

專案構建

1.專案結構如下圖：

說明：2.server目錄：該目錄主要用於存放伺服器的配置檔案，該目錄下的所有目錄及檔案需要使用命令進行生成。方法：在cmd命令下進入到es6專案的server目錄，使用 express -e .命名進行建立express，注意命令中的「.」表示當前目錄。如下圖：

接著輸入npm install命令安裝npm，在server下生成package.json檔案，如下圖：

4.根目錄下建立package.json檔案（用於專案安裝npm依賴包的配置），可以手動建立也可用使用命令建立。此處使用npm init命令建立，一路回車確認就行，最後一步輸入 y 如下圖：

根目錄下建立babel編譯的配置檔案，.babelrc檔案，再建立gulp配置檔案，gulpfile.babel.js檔案（使用es6編寫指令碼）。