詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境

準(zhǔn)備工作

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

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

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

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

2. 為后端選擇合適的預(yù)處理工具

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

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

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

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

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

正式開始搭建

1. 利用 Express 腳手架快速搭建應(yīng)用

使用 Express 提供的腳手架工具（Express application generator）可以在 1s 之內(nèi)搭建出最基本的應(yīng)用。

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

npm install express-generator -g

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

express <myapp>

完成后的文件結(jié)構(gòu)是這樣的

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

但是這個文件結(jié)構(gòu)只是后端代碼，要想跟前端代碼相結(jié)合，需要做一些改動。我們計劃最終的文件結(jié)構(gòu)應(yīng)該是這樣的

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

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

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

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

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

/.babelrc

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

.babelrc 是 Babel 6.0 必須的文件

/.index.js

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

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

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

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

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

2. 利用 Vue 腳手架快速搭建應(yīng)用

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

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

首先安裝 template 工具

npm install -g vue-cli

然后執(zhí)行命令生成代碼。命令執(zhí)行過程中需要輸入一些參數(shù)

vue init webpack <my-project>

生成的代碼結(jié)構(gòu)是這樣的

.
├── 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

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

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

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

其他的文件先忽略不管。

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

3. 配置 Webpack

我們計劃讓 Webpack 將前端文件打包成一個 build.js 文件，然后放在 /src/server/public/javascripts 中供 jade 模板使用。所以設(shè)置好 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 并不會把打包好的代碼生成在磁盤上，而是保留在內(nèi)存里。我們選擇后一種方式，因為更方便。

只應(yīng)該在開發(fā)環(huán)境中以 Express 中間件的形式部署 Webpack

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

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 地址的請求并返回正確的結(jié)果，同時，如果被 Webpack 監(jiān)聽的文件發(fā)生變動，會立即通知前端產(chǎn)生相應(yīng)變化。

4. 配置 Nodemon

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

在項目根路徑下新增文件 nodemon.json，內(nèi)容為

{
 "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 設(shè)置為 true 將打印更豐富的日志信息，對開發(fā)很有幫助。

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

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

5. 配置 package.json

首先在 script 中增加一個命令，用來啟動整個應(yīng)用

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

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

完整的代碼已經(jīng)上傳 Github，點擊訪問

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。