詳解如何從零開始搭建Express+Vue開發環境

準備工做

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/*前端全棧交流學習圈：866109386*/
│  ├── images/*幫助1-3年前端人員，提高技術與思惟*/
│  ├── 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
│  └── ... /*前端全棧學習交流圈：866109386*/
├── src/*幫助1-3年前端人員突破技術，替身思惟*/
│  ├── 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 同時進行開發了。