使用 vue-cli3 + rollup + plop 搭建 NPM 插件

开发 NPM 插件通常需要涉及打包代码、编写测试用例、编写文档等繁琐步骤。借助 vue-cli3、rollup 和 plop，我们可以简化这一过程，快速构建和发布 NPM 插件。

vue-cli3

vue-cli3 是一个用于创建 Vue.js 应用程序的脚手架工具。它提供了开箱即用的构建、测试和部署工具链，可以帮助我们快速启动项目。

rollup

rollup 是一个 JavaScript 模块打包器，它可以将多个模块打包成一个或多个文件。它支持 tree-shaking，可以移除未使用的代码，减小最终包的大小。

plop

plop 是一个基于约定的代码生成器。它允许我们定义代码模板，并在需要时使用命令行或 GUI 来生成代码。

搭建 NPM 插件

创建项目

首先，使用 vue-cli3 创建一个新项目：

vue create my-npm-plugin

安装 rollup 和 plop

安装 rollup 和 plop：

npm install --save-dev rollup plop

配置 rollup

在 package.json 文件中，添加以下 rollup 配置：

{
  "scripts": {
    "build": "rollup -c rollup.config.js"
  }
}

创建一个 rollup.config.js 文件：

import vue from '@vitejs/plugin-vue';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/my-npm-plugin.js',
    format: 'cjs'
  },
  plugins: [
    vue()
  ]
};

配置 plop

在项目根目录创建 plop-templates 文件夹。在这个文件夹中，创建以下模板文件：

main.js

在这个文件中，写入以下代码：

export default {
  install(Vue) {
    // 插件逻辑
  }
};

使用 plop 生成代码

在命令行中，运行以下命令：

npx plop --plopfile plopfile.js

这将提示您选择一个模板。选择 main.js 模板，plop 将根据模板生成 src/main.js 文件。

构建和发布插件

运行以下命令构建插件：

npm run build

这将在 dist 文件夹中生成打包后的插件文件。

接下来，发布插件到 npm：

npm publish

结论

通过结合 vue-cli3、rollup 和 plop，我们可以轻松高效地构建和发布 NPM 插件。这种方法简化了打包、代码生成和发布过程，使我们能够专注于插件的逻辑和功能。