[Vue CLI 3] 插件編寫實戰和源碼分析

當你看過了官方的幾個插件以後，慢慢地，其實你也有需求了。

那如何編寫一個 Vue CLI 3 的插件呢？

本文代碼已經放到 github 上，地址：https://github.com/dailynodej...

---

咱們建一個文件夾，取名 vue-cli-plugin-demo，建立一個 index.js

module.exports = (api, projectOptions) => {
  //...
}

由於咱們看遍了 cli-plugin-babel、cli-plugin-eslint 等，咱們發現他們的最外層結構可能是相似的：

多有一個 index.js：

接受 2 個參數：

• api
• options

module.exports = (api, options) => {
  // ...
}

裏面就是插件的核心部分，咱們觀察到它們兩個也很相似，多用到了：

api.chainWebpack(webpackConfig => {
  // ...
})

但同時在 eslint 的源碼中，咱們看到了：

api.registerCommand('lint', {
}, args => {
  // ...
})

咱們看項目根目錄的 package.json 有一個命令

"scripts": {
  "lint": "vue-cli-service lint"
}

因此看起來：api.registerCommand 就是能夠註冊命令的。

你們還記得咱們還有其餘以前介紹過的命令嗎：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
}

咱們看一下它們是否是也是這樣註冊的：

在 @vue/cli-service/lib/commands/build/ 中

module.exports = (api, options) => {
  api.registerCommand('build', {
  }, async (args) => {
  })
}

在 cli-service/lib/commands/serve.js 中

module.exports = (api, options) => {
  api.registerCommand('serve', {
  }, async function serve (args) {
  })
}

那咱們的 demo 也註冊一個命令：

module.exports = (api, projectOptions) => {
  api.registerCommand('demo', {
      description: 'demo plugin for vue cli 3',
      usage: 'vue-cli-service demo',
      options: {}
  }, (args) => {
      let options = projectOptions.pluginOptions.demoOptions
      console.log('options', options)
  })
}

這裏要提到 vue.config.js 裏面的一個配置項了 pluginOptions

它能夠用來給第三方插件傳遞配置

因此咱們正好能夠經過它進行一些配置：

module.exports = {
  pluginOptions: {
    demoOptions: {
      c: 1,
      d: 2
    }
  }
}

而後在插件裏面獲取的方式就是上面的代碼中：

let options = projectOptions.pluginOptions.demoOptions