Webpack + Vue2 + Koa2 構建應用

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

該構建適用PC端開發，經過配置亦可支持移動端開發

具體以代碼爲主，持續更新....

技術棧

• Webpack3
• Koa2
• Axios
• Vue2 & vue-router
• Babel Es6/7
• Eslint
• stylus postcss

$ npm i 安裝npm包
$ npm start 啓動項目

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

目錄結構

Webpack3

$ npm i webpack -D

webpack 的配置項主要包括如下幾點：

• entry: 入口,String||Array||Object
• output: 出口，定義打包輸出的文件；包括路徑，文件名，還可能有運行時的訪問路徑（publicPath）參數
• module: webpack將全部的資源都看作是模塊，而模塊就須要加載器；主要定義一些loaders,定義哪些後綴名的文件應該用哪些loader
• test: 檢測哪些文件須要此loader，是一個正則表達式
• exclude: 忽略哪些文件
• resolve: 定義可以被打包的文件，文件後綴名
• plugins: 定義一些額外的插件
• ...

webpack配置文件

• 基礎配置webpack.config.base
• 開發配置webpack.config.dev.js
• 生產配置webpack.config.prod.js

Webpack配置能夠參考官方 or Webpack中文文檔

Koa2

koa的中間件是由generator組成的。
從第一個中間件開始執行，遇到next進入下一個中間件，一直執行到最後一箇中間件，
在逆序，執行上一個中間件next以後的代碼，一直到第一個中間件執行結束才發出響應。

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

Koa2 取代webpack-dev-server做爲打包服務的部署方案，代碼以下：

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函數，generator函數須要convert轉換
const middleWares = [
  // 日誌記錄
  loggerMiddleware,
  // 壓縮響應
  require('koa-compress')(),
  // 錯誤處理
  errorMiddleware,
  // webpack開發中間件
  convert(devMiddleware),
  // webpack熱替換中間件
  convert(webpackHotMiddleware(clientCompiler)),
  // 手動設置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 + '\n')
  opn(uri)
})

// 錯誤處理
app.on('error', (err) => {
  console.error('Server error: \n%s\n%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 Es6/7

• babel-core
• babel-preset-es2015 打包了 es6 的特性
• babel-preset-latest latest是一個特殊的presets，包括了es2015，es2016，es2017的插件（目前爲止，之後有es2018也會包括進去）。 即老是包含最新的編譯插件。
• babel-preset-env

推薦使用babel-preset-env，其餘模式會把瀏覽器支持的一些es6/7新特性轉成ES5代碼，有點浪費。

Axios

基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 node.js 中使用

瀏覽器支持

使用HTTP請求

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

對於非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)

對於post和put方法，必須提供第二個data參數，即提供一個空對象，好比：
this.http.post(url, {})

使用 ESlint 進行代碼檢查

特色:

• 默認規則包含全部 JSLint、JSHint 中存在的規則，易遷移
• 規則可配置性高：可設置「警告」、「錯誤」兩個 error 等級，或者直接禁用
  .eslintrc.js配置文件常見的格式

{
  root: true,
  parserOptions: { //EsLint經過parserOptions，容許指定校驗的ecma的版本，及ecma的一些特性
    ecmaVersion: 6, //指定ECMAScript支持的版本，6爲ES6
    sourceType: 'module', //指定來源的類型，有兩種」script」或」module」
    ecmaFeatures: { // ecmaFeatures指定你想使用哪些額外的語言特性
    experimentalObjectRestSpread: true,
    }
  },
  parser: 'babel-eslint', // EsLint默認使用esprima作腳本解析，也能夠切換成babel-eslint解析
  env: { // Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等
    browser: true,
    node: true,
    es6: true,
    mocha: true
  },
  plugins: [ // EsLint容許使用第三方插件
    'html',
    'import',
    'promise',
  ],
  extends: 'standard', // Extends是EsLint默認推薦的驗證你可使用配置選擇哪些校驗是你所須要的
  rules: [ // 自定義規則
  ],
  globals: { // 即插件在執行過程當中用到的其它全局變量
  }
}

app.config.js

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

Configuration tasks/命令

• npm start: 啓動開發模式下的server
• npm run build: 打包生產模式的代碼

繼續完善....