在網上觀看ES6的學習視訊，瞭解如何建立一個基礎的ES6工程，包括目錄結構，自動構建與伺服器搭建 記錄一下，供以後自己參考

我使用的git，Windows的cmd也能用，但是有一些命令不一樣，如檢視當前目錄下的所有檔案cmd裡面是dir 而不是ls ，又如建立一個檔案 在cmd裡面是cd .>text.js 而不是touch text.js 等等，還是Linux的命令用起來方便些

一、建立專案根目錄

eg：ES6 ，建立完成後進入根目錄

二、在根目錄中建立並行的三個模板（資料夾）

app：放置前端程式碼，eg：css，js，一些模板等 server：放置伺服器程式碼 tasks：放置構建任務的指令碼檔案

三、在app資料夾下操作

1、建立css，js，views三個資料夾 css資料夾：用來放置css程式碼 js資料夾：用來放置js檔案，這裡需要注意的是，在js中因為有類的概念，所以需要在js資料夾下再建立一個class資料夾來存放類檔案 views：模板資料夾，用來存html檔案

2、初始化幾個檔案 空的目錄是沒有任何作用的，所以要新建幾個檔案來初始化

A、在class目錄下建立一個空的類檔案 eg：test.js B、在js目錄下初始化一個入口檔案 eg：index.js

C、在views目錄下初始化兩個模板檔案 一個是錯誤模板檔案 error.ejs 一個是入口模板檔案 index.ejs

上面說views存的是html檔案，為什麼這裡是ejs檔案？下面會說到，這裡就當它是html檔案就行了

四、在server目錄下安裝伺服器程式碼

A、在安裝過程中，因為要用到express腳手架，所以要先安裝express腳手架，express腳手架是通過nodejs工具來安裝的，這裡的安裝和安裝vue-cli腳手架一樣

因為在express 4.x版本中是將命令工具分出來了，所以需要再安裝一個命令工具，執行命令npm install -g express-generator

B、安裝完成後，在server目錄下輸入命令express -e . 來直接使用express腳手架

解釋： express：腳手架的啟動命令 -e：使用ejs模板引擎，即使用ejs作為模板，這也就是為什麼前面views資料夾裡建立的檔案以ejs為字尾的原因 .：表示在當前目錄下執行

使用命令npm install 來按裝相關的依賴

五、在構建目錄views中操作

在這個目錄中，需要建立任務的js，如檔案的合併、指令碼的編譯、模板的自動更新等

在views目錄下建立一個util目錄，用來放置一些常見的指令碼

指令碼檔案有很多，如這裡的args.js，後續需要用到其它的檔案的時候再去新增

六、在跟目錄下操作

A、建立一個名為package.json檔案 專案要安裝依賴包（npm包）的過程中，就必須要有一個package.json檔案

這個檔案可以手動建立，也可以通過命令npm init 來自動生成（一路回車就行，後期想修改直接去找到這個檔案就能進行修改）

這裡是自動生成的

有了這個檔案後，就可以用npm install 命令來安裝想要使用的npm依賴包了

B、建立一個設定babel編譯工具的配置檔案 .babelrc

注意：這裡的檔名只能是這個.babelrc ，不能是其它的檔名，因為在babel進行編譯時，它會自動去找一個名為.babelrc 的檔案，如果找不到，就沒法讀到配置

C、因為整個專案的構建是使用gulp來做編譯的，所以要建立gulp的配置檔案 gulpfile.babel.js（同樣也只能是這個檔名）

官網上說的是建立一個名為gulpfile.js檔案，為什麼這裡會多一個babel，是因為在我的專案中之後寫的構建指令碼是用的ES6的語法，如果不加babel，在執行gulp指令碼的時候會報錯

截止到此，整個專案的構建目錄的基本情況就已經完成建立了