vue-cli#2.0專案結構分析

hieeyh發表於2016-12-21
原文網址 : https://segmentfault.com/a/1190000007880723
Vue

接觸過vue的同學應該都知道，用vue-cli開發vue的專案十分方便，它可以幫你快速構建一個具有強大構建能力的Vue.js專案。今天不談什麼是vue-cli，而是來說說用vue-cli構建的專案結構是什麼樣的並分析部分檔案。這裡以我之前寫的一個小專案為參考，專案是用vue-cli的webpack模板構建的，專案地址：https://github.com/hieeyh/tong2-family。

專案結構

.
|-- build                            // 專案構建(webpack)相關程式碼
|   |-- build.js                     // 生產環境構建程式碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱過載相關
|   |-- dev-server.js                // 構建本地伺服器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 專案開發環境配置
|   |-- dev.env.js                   // 開發環境變數
|   |-- index.js                     // 專案一些配置變數
|   |-- prod.env.js                  // 生產環境變數
|   |-- test.env.js                  // 測試環境變數
|-- src                              // 原始碼目錄
|   |-- components                     // vue公共元件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口檔案
|   |-- main.js                        // 程式入口檔案，載入各種公共元件
|-- static                           // 靜態檔案，比如一些圖片，json資料等
|   |-- data                           // 群聊分析得到的資料用於資料視覺化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義程式碼格式
|-- .gitignore                       // git上傳需要忽略的檔案格式
|-- README.md                        // 專案說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 專案基本資訊
.

package.json

package.json檔案是專案根目錄下的一個檔案，定義該專案開發所需要的各種模組以及一些專案配置資訊（如專案名稱、版本、描述、作者等）。

scripts欄位

package.json檔案裡有一個scripts欄位。

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  }

在開發環境下，在命令列中執行npm run dev就相當於在執行node build/dev-server.js。所以script欄位是用來指定npm相關命令的縮寫的。

dependencies欄位和devDependencies欄位

dependencies欄位指定了專案執行時所依賴的模組，devDependencies欄位指定了專案開發時所依賴的模組。在命令列中執行npm install命令，會自動安裝dependencies和devDependencies欄位中的模組。
package.json還有很多配置相關項，想進一步瞭解package.json的可參考：https://docs.npmjs.com/files/package.json

webpack配置相關

上面說到在命令列中npm run dev就相當於在執行node build/dev-server.js，想必dev-server.js這個檔案是十分重要的，它是在開發環境下構建時第一個要執行的檔案。掘金上已經有一篇對vue-cli#2.0 webpack配置的分析文章，裡面詳細講解了webpack相關配置檔案的每行程式碼的意思，我只做一些補充。連結在此（一定要自習閱讀，收穫會很大）：https://gold.xitu.io/post/584e48b2ac502e006c74a120。

dev-server.js

...
...
// http-proxy可以實現轉發所有請求代理到後端真實API地址，以實現前後端開發完全分離
// 在config/index.js中可以對proxyTable想進行配置
var proxyMiddleware = require('http-proxy-middleware')
...
...
// 熱載入要使用webpack-dev-middleware在沒有webpack-dev-server的時候進行熱載入
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 當html-webpack-plugin模板改變是強制進行頁面重新載入
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

webpack.base.conf.js

...
...
module.export = {
    // 編譯入口檔案
    entry: {},
    // 編譯輸出路徑
    output: {},
    // 一些解決方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各種不同型別檔案載入器配置
        loaders: {
        ...
        ...
        // js檔案用babel轉碼
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些檔案不需要轉碼
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue檔案一些相關配置
    vue: {}
}

check-version.js

這個檔案主要是用來檢測當前環境中的node和npm版本和我們需要的是否一致的。

// 載入語義化版本測試庫
var semver = require('semver')
// 定製控制檯日誌的輸入樣式
var chalk = require('chalk')
// 引入package.json檔案
var packageConfig = require('../package.json')
var exec = function (cmd) {
  return require('child_process')
    .execSync(cmd).toString().trim()
}
// 定義node和npm版本需求所組成的陣列
var versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  },
  {
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  }
]
module.exports = function () {
  var warnings = []
  // 依次判斷版本是否符合要求
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }
  ...
}

想把webpack完全搞懂還是需要費很大功夫的，我感覺自己也只是入了一個門而已，要想深入瞭解webpack還是要去官網看說明文件。

  1. http://webpack.github.io/docs/

  2. https://webpack.js.org/configuration/

.babelrc

Babel直譯器的配置檔案，存放在根目錄下。Babel是一個轉碼器，專案裡需要用它將ES6程式碼轉為ES5程式碼。這裡有一篇阮一峰老師寫的相關文章供參考：Babel 入門教程

  // 設定轉碼規則
  "presets": ["es2015", "stage-2"],
  // 轉碼的一些外掛
  "plugins": ["transform-runtime"],
  "comments": false

.editorconfig

該檔案定義專案的編碼規範，編輯器的行為會與.editorconfig 檔案中定義的一致，並且其優先順序比編輯器自身的設定要高，這在多人合作開發專案時十分有用而且必要。

root = true

[*]    // 對所有檔案應用下面的規則
charset = utf-8                    // 編碼規則用utf-8
indent_style = space               // 縮排用空格
indent_size = 2                    // 縮排數量為2個空格
end_of_line = lf                   // 換行符格式
insert_final_newline = true        // 是否在檔案的最後插入一個空行
trim_trailing_whitespace = true    // 是否刪除行尾的空格

瞭解更多請參考官方配置文件http://editorconfig.org/

接觸vue並不久，很多東西也不是特別清楚，文章裡有什麼問題歡迎指出。

相關文章