Vue CLI 插件和 Preset

2020-03-13 15:10 更新

插件

Vue CLI 使用了一套基于插件的架構(gòu)。如果你查閱一個(gè)新創(chuàng)建項(xiàng)目的 package.json,就會(huì)發(fā)現(xiàn)依賴都是以 @vue/cli-plugin- 開頭的。插件可以修改 webpack 的內(nèi)部配置,也可以向 vue-cli-service 注入命令。在項(xiàng)目創(chuàng)建的過程中,絕大部分列出的特性都是通過插件來實(shí)現(xiàn)的。

基于插件的架構(gòu)使得 Vue CLI 靈活且可擴(kuò)展。如果你對(duì)開發(fā)一個(gè)插件感興趣,請(qǐng)翻閱插件開發(fā)指南。

提示

你可以通過 vue ui 命令使用 GUI 安裝和管理插件。

在現(xiàn)有的項(xiàng)目中安裝插件

每個(gè) CLI 插件都會(huì)包含一個(gè) (用來創(chuàng)建文件的) 生成器和一個(gè) (用來調(diào)整 webpack 核心配置和注入命令的) 運(yùn)行時(shí)插件。當(dāng)你使用 vue create 來創(chuàng)建一個(gè)新項(xiàng)目的時(shí)候,有些插件會(huì)根據(jù)你選擇的特性被預(yù)安裝好。如果你想在一個(gè)已經(jīng)被創(chuàng)建好的項(xiàng)目中安裝一個(gè)插件,可以使用 vue add 命令:

vue add eslint

提示

vue add 的設(shè)計(jì)意圖是為了安裝和調(diào)用 Vue CLI 插件。這不意味著替換掉普通的 npm 包。對(duì)于這些普通的 npm 包,你仍然需要選用包管理器。

警告

我們推薦在運(yùn)行 vue add 之前將項(xiàng)目的最新狀態(tài)提交,因?yàn)樵撁羁赡苷{(diào)用插件的文件生成器并很有可能更改你現(xiàn)有的文件。

這個(gè)命令將 @vue/eslint 解析為完整的包名 @vue/cli-plugin-eslint,然后從 npm 安裝它,調(diào)用它的生成器。

# 這個(gè)和之前的用法等價(jià)
vue add cli-plugin-eslint

如果不帶 @vue 前綴,該命令會(huì)換作解析一個(gè) unscoped 的包。例如以下命令會(huì)安裝第三方插件 vue-cli-plugin-apollo:

# 安裝并調(diào)用 vue-cli-plugin-apollo
vue add apollo

你也可以基于一個(gè)指定的 scope 使用第三方插件。例如如果一個(gè)插件名為 @foo/vue-cli-plugin-bar,你可以這樣添加它:

vue add @foo/bar

你可以向被安裝的插件傳遞生成器選項(xiàng) (這樣做會(huì)跳過命令提示):

vue add eslint --config airbnb --lintOn save

如果一個(gè)插件已經(jīng)被安裝,你可以使用 vue invoke 命令跳過安裝過程,只調(diào)用它的生成器。這個(gè)命令會(huì)接受和 vue add 相同的參數(shù)。

提示

如果出于一些原因你的插件列在了該項(xiàng)目之外的其它 package.json 文件里,你可以在自己項(xiàng)目的 package.json 里設(shè)置 vuePlugins.resolveFrom 選項(xiàng)指向包含其它 package.json 的文件夾。

例如,如果你有一個(gè) .config/package.json 文件:

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}

項(xiàng)目本地的插件

如果你需要在項(xiàng)目里直接訪問插件 API 而不需要?jiǎng)?chuàng)建一個(gè)完整的插件,你可以在 package.json 文件中使用 vuePlugins.service 選項(xiàng):

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}

每個(gè)文件都需要暴露一個(gè)函數(shù),接受插件 API 作為第一個(gè)參數(shù)。關(guān)于插件 API 的更多信息可以查閱插件開發(fā)指南。

你也可以通過 vuePlugins.ui 選項(xiàng)添加像 UI 插件一樣工作的文件:

{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}

更多信息請(qǐng)閱讀 UI 插件 API

Preset

一個(gè) Vue CLI preset 是一個(gè)包含創(chuàng)建新項(xiàng)目所需預(yù)定義選項(xiàng)和插件的 JSON 對(duì)象,讓用戶無需在命令提示中選擇它們。

在 vue create 過程中保存的 preset 會(huì)被放在你的 home 目錄下的一個(gè)配置文件中 (~/.vuerc)。你可以通過直接編輯這個(gè)文件來調(diào)整、添加、刪除保存好的 preset。

這里有一個(gè) preset 的示例:

{
  "useConfigFiles": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    },
    "@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}
  }
}

Preset 的數(shù)據(jù)會(huì)被插件生成器用來生成相應(yīng)的項(xiàng)目文件。除了上述這些字段,你也可以為集成工具添加配置:

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

這些額外的配置將會(huì)根據(jù) useConfigFiles 的值被合并到 package.json 或相應(yīng)的配置文件中。例如,當(dāng) "useConfigFiles": true 的時(shí)候,configs 的值將會(huì)被合并到 vue.config.js 中。

Preset 插件的版本管理

你可以顯式地指定用到的插件的版本:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... 該插件的其它選項(xiàng)
    }
  }
}

注意對(duì)于官方插件來說這不是必須的——當(dāng)被忽略時(shí),CLI 會(huì)自動(dòng)使用 registry 中最新的版本。不過我們推薦為 preset 列出的所有第三方插件提供顯式的版本范圍。

允許插件的命令提示

每個(gè)插件在項(xiàng)目創(chuàng)建的過程中都可以注入它自己的命令提示,不過當(dāng)你使用了一個(gè) preset,這些命令提示就會(huì)被跳過,因?yàn)?Vue CLI 假設(shè)所有的插件選項(xiàng)都已經(jīng)在 preset 中聲明過了。

在有些情況下你可能希望 preset 只聲明需要的插件,同時(shí)讓用戶通過插件注入的命令提示來保留一些靈活性。

對(duì)于這種場景你可以在插件選項(xiàng)中指定 "prompts": true 來允許注入命令提示:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // 讓用戶選取他們自己的 ESLint config
      "prompts": true
    }
  }
}

遠(yuǎn)程 Preset

你可以通過發(fā)布 git repo 將一個(gè) preset 分享給其他開發(fā)者。這個(gè) repo 應(yīng)該包含以下文件:

  • preset.json: 包含 preset 數(shù)據(jù)的主要文件(必需)。
  • generator.js: 一個(gè)可以注入或是修改項(xiàng)目中文件的 Generator。
  • prompts.js 一個(gè)可以通過命令行對(duì)話為 generator 收集選項(xiàng)的 prompts 文件。

發(fā)布 repo 后,你就可以在創(chuàng)建項(xiàng)目的時(shí)候通過 --preset 選項(xiàng)使用這個(gè)遠(yuǎn)程的 preset 了:

# 從 GitHub repo 使用 preset
vue create --preset username/repo my-project

GitLab 和 BitBucket 也是支持的。如果要從私有 repo 獲取,請(qǐng)確保使用 --clone 選項(xiàng):

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

加載文件系統(tǒng)中的 Preset

當(dāng)開發(fā)一個(gè)遠(yuǎn)程 preset 的時(shí)候,你必須不厭其煩的向遠(yuǎn)程 repo 發(fā)出 push 進(jìn)行反復(fù)測(cè)試。為了簡化這個(gè)流程,你也可以直接在本地測(cè)試 preset。如果 --preset 選項(xiàng)的值是一個(gè)相對(duì)或絕對(duì)文件路徑,或是以 .json 結(jié)尾,則 Vue CLI 會(huì)加載本地的 preset:

# ./my-preset 應(yīng)當(dāng)是一個(gè)包含 preset.json 的文件夾
vue create --preset ./my-preset my-project

# 或者,直接使用當(dāng)前工作目錄下的 json 文件:
vue create --preset my-preset.json my-project


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)