定製化vue-cli Template/webpack

天驅發表於2018-05-29
VueWeb

背景

以前的專案要不是前人搭建的，要不就是從 vue-cli 搭建，然後將一些舊專案公用的程式碼搬過來，這些操作下來一個小時估計是跑不了的了，所以搭建屬於自己的 template 是一件省時省力的事情。

本文章不會講到 vue-cli 的原理和實現，有興趣的同學可以閱讀 從vue-cli原始碼學習如何寫模板，這篇文章寫的很好，足夠理解 vue-cli 的原理了。

如何修改 template 檔案

首先，需要從 template/webpack 下載官方 template/webpack 專案，我們主要修改的地方是根目錄下的meta.js檔案和template目錄；

meta.js：

主要改兩個地方：prompts 和 filters，我們用過 inquirer 庫的都知道，prompt 這是一個命令列形式的問答工具，在使用vue init webpack my-project這個命令的時候，需要回答一些問題，就是依賴於 prompt 這個模組；

// prompts(節選)
prompts: {
    name: {
      when: 'isNotTest', // 代表不是test的時候詢問(isNotTest可以看scenarios/index.js檔案)
      type: 'string', // 問題的型別，這裡 string 代表輸入專案名字
      required: true, // 必須填寫 name
      message: 'Project name', // 問題的描述
    },
    lint: {
      when: 'isNotTest',
      type: 'confirm',
      message: 'Use ESLint to lint your code?',
    },
    lintConfig: {
      when: 'isNotTest && lint', // 代表不是test並且上面lint問題選擇yes才詢問
      type: 'list', // 答案從choices中選擇
      message: 'Pick an ESLint preset',
      choices: [
        {
          name: 'Standard (https://github.com/standard/standard)',
          value: 'standard',
          short: 'Standard',
        },
        {
          name: 'Airbnb (https://github.com/airbnb/javascript)',
          value: 'airbnb',
          short: 'Airbnb',
        },
        {
          name: 'none (configure it yourself)',
          value: 'none',
          short: 'none',
        }
      ],
    }
}
複製程式碼
// filters(節選)
filters: {
    '.eslintrc.js': 'lint', // .eslintrc.js檔案只有lint問題選擇yes才會建立
    'build/webpack.test.conf.js': "unit && runner === 'karma'", // webpack.test.conf.js檔案只有unit問題選擇yes並且runner問題選擇karma選項才會建立
    'src/router/**/*': 'router' // src/router目錄只有在router問題選擇yes才會建立
  }
複製程式碼

template：

  • 編寫EOF條件

template
可以看到template資料夾看起來就是一個vue init命令後的目錄了，但仔細看檔案的話可以看到差異：

// package.json/scripts
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    {{#if_eq runner "jest"}}
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    {{/if_eq}}
    {{#if_eq runner "karma"}}
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    {{/if_eq}}
    {{#e2e}}
    "e2e": "node test/e2e/runner.js",
    {{/e2e}}
    {{#if_or unit e2e}}
    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}",
    {{/if_or}}
    {{#lint}}
    "lint": "eslint --ext .js,.vue src{{#unit}} test/unit{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}",
    {{/lint}}
    "build": "node build/build.js"
  }
複製程式碼

可以看多在package.json檔案裡穿插著一些EOF風格的標籤，這些標籤可分為兩種（可以自己擴充套件EOF條件）

{{#lint}}***{{/lint}}表示標籤內的內容只有在lint問題選擇yes才會存在

{{#if_eq runner "jest"}}***{{/if_eq}}表示標籤內的內容只有在runner問題的答案等於jest的情況才會存在，個人可以擴充套件EOF的條件命令（在lib/generate.js, 預設有if_eq 和 unless_eq兩個命令）

  • 修改檔案目錄

這個直接將template的目錄結構改變即可，這裡把src目錄改成自己習慣的目錄結構

template/src

我自己的template

github：masongzhi/vue-template-webpack

用法：vue init masongzhi/vue-template-webpack my-project

vue-template-webpack 特點：

  • 基於 template/webpack 模板
  • 自定義目錄結構
  • 增加 vuex 選項
  • 增加 filters 選項
  • 增加 mock 伺服器選項
  • 增加 prettier 選項（不選擇 lint 情況下，lint 情況請自行新增）

總結

其實我發覺在不介紹原理的情況下，感覺寫的挺亂的，所以建議大家可以先閱讀 從vue-cli原始碼學習如何寫模板，再看本文章進行實踐；

建立好自己的template模板後，之後再搭建新專案就不用手動的複製黏貼了，確實是很方便的。

ps

專案文章：json-server的實踐與自定義配置化

相關文章