[Vue CLI 3] 插件编写实战和源码分析

dailyvuejs

当你看过了官方的几个插件之后,慢慢地,其实你也有需求了。

那如何编写一个 Vue CLI 3 的插件呢?

本文代码已经放到 github 上,地址:https://github.com/dailynodej...


我们建一个文件夹,取名 vue-cli-plugin-demo,创建一个 index.js

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

因为我们看遍了 cli-plugin-babelcli-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
阅读 4.4k

目前专注 Vue CLI 3 源码和 vue.config.js 配置内部设计等学习分享

1.6k 声望
303 粉丝
0 条评论

目前专注 Vue CLI 3 源码和 vue.config.js 配置内部设计等学习分享

1.6k 声望
303 粉丝
宣传栏