摘要：從第一個(gè)中間件開始執(zhí)行，遇到進(jìn)入下一個(gè)中間件，一直執(zhí)行到最后一個(gè)中間件，在逆序，執(zhí)行上一個(gè)中間件之后的代碼，一直到第一個(gè)中間件執(zhí)行結(jié)束才發(fā)出響應(yīng)。

github地址: https://github.com/zdliuccit/... 歡迎star

該構(gòu)建適用PC端開發(fā)，通過配置亦可支持移動(dòng)端開發(fā)

具體以代碼為主，持續(xù)更新....

Webpack3

Koa2

Axios

Vue2 & vue-router

Babel Es6/7

Eslint

stylus postcss

$ npm i 安裝npm包
$ npm start 啟動(dòng)項(xiàng)目

注: 該構(gòu)建用到的npm包說明參考 doc目錄下的 npm包說明.md文檔

$ npm i webpack -D

webpack 的配置項(xiàng)主要包括以下幾點(diǎn)：

entry: 入口,String||Array||Object

output: 出口，定義打包輸出的文件；包括路徑，文件名，還可能有運(yùn)行時(shí)的訪問路徑（publicPath）參數(shù)

module: webpack將所有的資源都看做是模塊，而模塊就需要加載器；主要定義一些loaders,定義哪些后綴名的文件應(yīng)該用哪些loader

test: 檢測(cè)哪些文件需要此loader，是一個(gè)正則表達(dá)式

exclude: 忽略哪些文件

resolve: 定義能夠被打包的文件，文件后綴名

plugins: 定義一些額外的插件

...

webpack配置文件

基礎(chǔ)配置webpack.config.base

開發(fā)配置webpack.config.dev.js

生產(chǎn)配置webpack.config.prod.js

Webpack配置可以參考官方 or Webpack中文文檔

koa的中間件是由generator組成的。
從第一個(gè)中間件開始執(zhí)行，遇到next進(jìn)入下一個(gè)中間件，一直執(zhí)行到最后一個(gè)中間件，
在逆序，執(zhí)行上一個(gè)中間件next之后的代碼，一直到第一個(gè)中間件執(zhí)行結(jié)束才發(fā)出響應(yīng)。

這里Koa2的中間件必須使用ES7語法 async/await

Koa2 取代webpack-dev-server作為打包服務(wù)的部署方案，代碼如下：

const app = new Koa()
const uri = "http://" + currentIP + ":" + appConfig.appPort

const devMiddleware = webpackDevMiddleware(clientCompiler, {
  publicPath: config.output.publicPath,
  headers: { "Access-Control-Allow-Origin": "*" },
  stats: {
    colors: true,
  },
  noInfo: false,
  watchOptions: {
    aggregateTimeout: 300,
    poll: true
  },
})
// 中間件,一組async函數(shù)，generator函數(shù)需要convert轉(zhuǎn)換
const middleWares = [
  // 日志記錄
  loggerMiddleware,
  // 壓縮響應(yīng)
  require("koa-compress")(),
  // 錯(cuò)誤處理
  errorMiddleware,
  // webpack開發(fā)中間件
  convert(devMiddleware),
  // webpack熱替換中間件
  convert(webpackHotMiddleware(clientCompiler)),
  // 手動(dòng)設(shè)置cookie方法
  setCookieMiddleware,
  // http中間件
  httpMiddleware(),
  // 插入自定義中間件
  ...appConfig.middleWares,
  // 路由
  KoaRouter.middleware(),
  // 代理中間件
  proxyMiddleware(),
]

middleWares.forEach((middleware) => {
  if (!middleware) {
    return
  }
  app.use(middleware)
})

console.log("> Starting dev server...")

devMiddleware.waitUntilValid(() => {
  console.log("> Listening at " + uri + "
")
  opn(uri)
})

// 錯(cuò)誤處理
app.on("error", (err) => {
  console.error("Server error: 
%s
%s ", err.stack || "")
})

const server = app.listen(appConfig.appPort)

process.on("SIGTERM", () => {
  console.log("Stopping dev server")
  devMiddleware.close()
  server.close(() => {
    process.exit(0)
  })
})

babel-core

babel-preset-es2015 打包了 es6 的特性

babel-preset-latest latest是一個(gè)特殊的presets，包括了es2015，es2016，es2017的插件（目前為止，以后有es2018也會(huì)包括進(jìn)去）。 即總是包含最新的編譯插件。

babel-preset-env

推薦使用babel-preset-env，其他模式會(huì)把瀏覽器支持的一些es6/7新特性轉(zhuǎn)成ES5代碼，有點(diǎn)浪費(fèi)。

基于 Promise 的 HTTP 請(qǐng)求客戶端，可同時(shí)在瀏覽器和 node.js 中使用

瀏覽器支持

使用HTTP請(qǐng)求

對(duì)于在vue組件中使用：
this.http.get(url, options)
this.http.delete(url, options)
this.http.post(url, data, options)
this.http.put(url, data, options)

對(duì)于非vue組件中使用：

import http from "@config/utils/http"

http.get(url, options)
http.delete(url, options)
http.post(url, data, options)
http.put(url, data, options)

對(duì)于post和put方法，必須提供第二個(gè)data參數(shù)，即提供一個(gè)空對(duì)象，比如：
this.http.post(url, {})

特點(diǎn):

默認(rèn)規(guī)則包含所有 JSLint、JSHint 中存在的規(guī)則，易遷移

規(guī)則可配置性高：可設(shè)置「警告」、「錯(cuò)誤」兩個(gè) error 等級(jí)，或者直接禁用
.eslintrc.js配置文件常見的格式

{
  root: true,
  parserOptions: { //EsLint通過parserOptions，允許指定校驗(yàn)的ecma的版本，及ecma的一些特性
    ecmaVersion: 6, //指定ECMAScript支持的版本，6為ES6
    sourceType: "module", //指定來源的類型，有兩種”script”或”module”
    ecmaFeatures: { // ecmaFeatures指定你想使用哪些額外的語言特性
    experimentalObjectRestSpread: true,
    }
  },
  parser: "babel-eslint", // EsLint默認(rèn)使用esprima做腳本解析，也可以切換成babel-eslint解析
  env: { // Environment可以預(yù)設(shè)好的其他環(huán)境的全局變量，如brower、node環(huán)境變量、es6環(huán)境變量、mocha環(huán)境變量等
    browser: true,
    node: true,
    es6: true,
    mocha: true
  },
  plugins: [ // EsLint允許使用第三方插件
    "html",
    "import",
    "promise",
  ],
  extends: "standard", // Extends是EsLint默認(rèn)推薦的驗(yàn)證你可以使用配置選擇哪些校驗(yàn)是你所需要的
  rules: [ // 自定義規(guī)則
  ],
  globals: { // 即插件在執(zhí)行過程中用到的其它全局變量
  }
}

module.exports = {
  // 主服務(wù)啟動(dòng)端口
  appPort: serverConfig.appPort,
  // 代理配置，可支持多個(gè)代理，key為前綴，命中后，會(huì)把前綴去掉，轉(zhuǎn)發(fā)到代理服務(wù)器
  proxy: serverConfig.proxy,
  // webpack服務(wù)端口,分離模式啟動(dòng)時(shí)用到
  webpackDevServerPort: 9002,
  // webpack的差異化配置
  webpack: {
    entry: {
      app: path.join(__dirname, "client/index.js"), // 入口
      vendor: ["vue", "vue-router", "vue-template-compiler"] // 拆分框架代碼
    },
    // 是否對(duì)樣式啟用px到rem的轉(zhuǎn)換,配合config/utils/responsive-design.js適配移動(dòng)端開發(fā)， 默認(rèn)不開啟
    enablePx2Rem: false,
    // 自定義Alias設(shè)置
    resolveAlias: {},
    // 擴(kuò)展rules
    rules: [],
    // 擴(kuò)展css postcss
    postcss: [],
  },
  // 自定義中間件 async await函數(shù)寫法
  middleWares: []
}

npm start: 啟動(dòng)開發(fā)模式下的server

npm run build: 打包生產(chǎn)模式的代碼

繼續(xù)完善....