準備工作

1. 為前端選擇合適的預處理工具和資源管理工具

預處理工具又分為 js 預處理工具和 css 預處理工具。Javascript 一直以來最為人詬病的一點就是缺乏原生的模塊機制，所有 js 代碼文件在被 html 頁面引入后將共用同一個命名空間。所以才出現了各種“標準”嘗試解決這個問題，但他們都不是原生的，需要額外的工具對代碼進行特殊處理。雖然 ES6 終于引入了模塊機制，但以現在的瀏覽器支持程度，還不足以“毫無顧慮地隨拿隨用”。所以 js 預處理工具最主要的工作就是幫助解決 js 的模塊問題。而 css 預處理工具則很好理解，就是把 sass，less 或者 stylus 代碼翻譯、合并成 css 代碼。

資源管理工具則是幫我們管理前端所需的各種資源文件（比如 css、js、圖片、字體等等），便于我們引用。目前常用的解決方法是將他們直接編碼進 js 代碼中，然后像引用 js 模塊一樣引用它們。這可比手寫各種 url 方便多了。

正如標題所說，我們將采用 Webpack，因為它具備上面所說的所有功能。此外還支持代碼熱替換，使修改代碼后不用刷新頁面也能在瀏覽器中立即看到效果。

2. 為后端選擇合適的預處理工具

后端面對的都是 js 代碼，不需要前端那樣的資源管理工具，另外， Node 強迫你使用至少一種模塊管理方案（CommonJS 或 ES6 的 import），也不用考慮代碼的依賴問題。

所以后端要簡單許多，唯一需要考慮的基本上就剩下如何將 ES6 轉譯成 ES5 了（如果你打算使用 ES6 的話）。目前常用的做法是使用 Babel，你可以用 Babel 命令行工具獨立執行編譯過程，也可以配置 Babel register 實現代碼運行時動態翻譯，這對于開發場景而言無疑是最方便的。所以我們選擇后一種方式。

3. 為整個項目選擇合適的流程控制工具

流程控制工具是為了幫助我們管理諸如代碼檢查、編譯、壓縮、移動、部署這些任務的，原本我們是通過手敲命令（或者高級一點寫個腳本）的方式做，有了流程控制工具以后，只需要提供配置文件和少量代碼就可以完成。

目前最流行的解決方案是 gulp。不過，由于我們這里要搭建的是開發環境，沒有移動代碼、壓縮、部署等需求，所以不需要功能強大的 gulp。我們只要用 nodemon 這個工具監聽代碼變動然后適時重啟 server就夠了。

正式開始搭建

1. 利用 Express 腳手架快速搭建應用

使用 Express 提供的腳手架工具（Express application generator）可以在 1s 之內搭建出最基本的應用。

如果你以前還沒試過，首先執行下面的命令安裝

npm install express-generator -g

然后執行以下命令生成代碼，命令執行過程中需要輸入一些參數。

express <myapp>

完成后的文件結構是這樣的

.├── app.js├── bin│  └── www├── package.json├── public│  ├── images│  ├── javascripts│  └── stylesheets│    └── style.css├── routes│  ├── index.js│  └── users.js└── views  ├── error.jade  ├── index.jade  └── layout.jade

但是這個文件結構只是后端代碼，要想跟前端代碼相結合，需要做一些改動。我們計劃最終的文件結構應該是這樣的

.├── src│  ├── client│  └── server└── ...

所以需要將上面自動生成的 Express 代碼放到 /src/server/ 路徑下。

接下來我們要刪除一些用不著的東西以及增加一些缺失的東西。

首先，由于我們打算在前端使用 Vue 框架，并由 Vue-Router 管理大部分路由，后端 Express 僅保留少量的 RESTful API 路由，所以后端不需要復雜的路由設置，那么 routes 文件夾下的內容可以簡化成一個 routers.js 文件。

然后，我們需要配置好 Babel register，所以需要在項目跟路徑下新增兩個文件 .babelrc 和 index.js，內容分別為：

/.babelrc

{ "presets": ["es2015"],}

.babelrc 是 Babel 6.0 必須的文件

/.index.js

require('babel-register')require('./src/server')

上面兩句完成 Bebel 注冊，它會爬取所有 require 或 import 方式依賴的模塊并把它們翻譯成 ES5。

自動生成的代碼里有個 www 文件，他是 Express 應用的入口文件，我們把它放在 server 路徑下并改名為 index.js 以便讓上面配置的 Babel register 能正確找到它。

為什么要改名為 index.js ？這是因為 require('./src/server') 在默認情況下會去找 ./src/server/index.js，如果你想用別的名字，那就記得將 Babel register 的配置文件里改為 require(./src/<your entry file> 。

好了，現在后端的事情先暫時告一段落，接下來看看前端。

2. 利用 Vue 腳手架快速搭建應用

同樣地，推薦使用 Vue 自帶的template 工具，在 1s 內生成基本代碼。

雖然利用這個工具生成的代碼的后端就是基于 Express 的，但是后端部分的代碼結構太簡單，不適合做后續開發。所以建議這里先將 Vue 生成的代碼放在另外一個地方，然后按需移動到前面用 Express 生成的代碼文件夾里。

首先安裝 template 工具

npm install -g vue-cli

然后執行命令生成代碼。命令執行過程中需要輸入一些參數

vue init webpack <my-project>

生成的代碼結構是這樣的

.├── build│  ├── dev-server.js     # development server script│  ├── karma.conf.js     # unit testing config│  ├── webpack.base.conf.js # shared base webpack config│  ├── webpack.dev.conf.js  # development webpack config│  ├── webpack.prod.conf.js # production webpack config│  └── ...├── src│  ├── main.js        # app entry file│  ├── App.vue        # main app component│  ├── components      # ui components│  │  └── ...│  └── assets        # module assets (processed by webpack)│    └── ...├── static          # pure static assets (directly copied)├── dist           # built files ready for deploy├── test│  └── unit         # unit tests│    ├── index.js     # unit test entry file│    └── ...├── .babelrc         # babel config├── .eslintrc.js       # eslint config├── index.html        # main html file└── package.json       # build scripts and dependencies

我們發現這里也有一個 .babelrc，內容跟之前自己創建的基本一致，可以忽略它。此外，它還提供了 .eslintrc.js，是為了配合 eslint 檢查代碼是否符合規范的。這里面的內容很簡單，想要偷懶就直接拿過來，覺得定制的規則不太符合自己的習慣的可以另外配置。

然后看到 build 路徑下有 3 個 webpack 有關的配置文件，因為我們是要搭建開發環境，所以挑里面的 webpack.base.conf.js 和 webpack.dev.conf.js 就可以，建議把內容合并到一個 webpack.conf.js 文件里，放在項目的根目錄下。

之后，基本上就是把 src 目錄移動到之前用 Express 創建的 /src/client/，我習慣將所有 js 的入口文件都改為 index.js 所以，這里也可以將 src/client/main.js 改名為 src/client/index.js。

其他的文件先忽略不管。

到這里，前端部分的代碼也基本整理完畢了。

3. 配置 Webpack

我們計劃讓 Webpack 將前端文件打包成一個 build.js 文件，然后放在 /src/server/public/javascripts 中供 jade 模板使用。所以設置好 webpack 的路徑部分（其他的保留原來的就好）：

{ ... entry: path.join(__dirname, 'src/client/index.js'),  output: {   path: path.join(__dirname, 'src/server/public/javascripts/'),   publicPath: '/javascripts/',   filename: 'build.js'  }, ...}

至于如何啟動 Webpack，你可以選擇單獨用一個 shell 窗口運行它，也可以以 Express 中間件的形式提供代理。采用后一種方式，webpack 并不會把打包好的代碼生成在磁盤上，而是保留在內存里。我們選擇后一種方式，因為更方便。

只應該在開發環境中以 Express 中間件的形式部署 Webpack

所以需要修改 /src/server/index.js，關鍵是增加這幾句

import webpack from 'webpack'import webpackDevMiddleware from 'webpack-dev-middleware'import webpackHotMiddleware from 'webpack-hot-middleware'import config from '../../webpack.config'const compiler = webpack(config)app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath, stats: { colors: true },}))app.use(webpackHotMiddleware(compiler))

這樣每次啟動 Express 后，Webpack 中間件會攔截 config.output.publicPath 地址的請求并返回正確的結果，同時，如果被 Webpack 監聽的文件發生變動，會立即通知前端產生相應變化。

4. 配置 Nodemon

之前提到過，計劃用 Nodemon 啟動 server 并監聽代碼變動。而 Nodemon 默認會監聽除了 .git 和 node_modules 路徑外的所有 js 代碼，因為我們已經有 Webpack 監聽前端代碼了，所以得做相關配置讓 Nodemon 只監聽某一塊代碼。

在項目根路徑下新增文件 nodemon.json，內容為

{ "verbose": true, "ignore": ["src/server/public/"], "events": {  "restart": "osascript -e 'display notification /"App restarted due to:/n'$FILENAME'/" with title /"nodemon/"'" }, "watch": ["src/server/"], "env": {  "NODE_ENV": "development" }, "ext": "js jade"}

其中，將 verbose 設置為 true 將打印更豐富的日志信息，對開發很有幫助。

我們選擇讓 Nodemon 監聽 src/server/ 目錄，并忽略 src/server/public 目錄，因為那里是前端 webpack 生成打包文件的地方。注意我們是以 Express 中間件的形式使用 Webpack，并不會在磁盤上真的產生文件，所以這個 ignore 規則其實可以省略。

別忘了在文件擴展名中增加 jade 類型，因為 Express 使用的是 jade 模板。

5. 配置 package.json

首先在 script 中增加一個命令，用來啟動整個應用

{ ... "scripts": {  "dev": "nodemon index.js" }, ...}

這樣，只需要運行 npm run dev 這一個命令就可以啟動 server 同時進行開發了。

完整的代碼已經上傳 Github，點擊訪問

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。