轻松发布！用 Vite + Vue3 打造你的 JavaScript 插件

前端

2023-11-05 06:45:29

构建并发布你的 JavaScript 插件：使用 Vite + Vue3 + Pnpm + TS

前言

JavaScript 插件为应用程序增添了令人惊叹的功能，使开发变得高效。本文将指导你使用 Vite、Vue3、Pnpm 和 TypeScript 从头开始构建并发布你的插件。

环境准备

确保你的环境符合以下要求：

Node.js >= 16.14.2
npm >= 8.3.0
Vite >= 3.0.0
Vue3 >= 3.2.0
TypeScript >= 4.7.4

项目初始化

新建项目

创建新目录并输入：
```
mkdir my-plugin
cd my-plugin
```

安装依赖项

使用 Pnpm 安装依赖项：

pnpm install --save-dev vite vue vue-router @vitejs/plugin-vue

创建 Vue 项目

使用 Vite 创建 Vue 项目：
```
vite create vue
```
选择 手册模式 并按照提示完成项目创建。

搭建插件

创建插件目录

创建 src/plugins 目录存放插件代码：
```
mkdir src
mkdir src/plugins
```

编写插件代码

在 src/plugins/MyPlugin.ts 中写入：

import { Plugin } from 'vue';

export const MyPlugin: Plugin = {
  install(app, options) {
    // 插件逻辑
  }
};

导出 TypeScript 类型

导出 TypeScript 类型：

export type MyPluginOptions = {
  // 插件选项
};

构建和测试

构建插件

构建插件：
```
pnpm build
```

创建测试用例

在 src/tests/MyPlugin.test.ts 中编写测试用例：

import { mount } from '@vue/test-utils';
import { MyPlugin } from '../plugins/MyPlugin';

describe('MyPlugin', () => {
  it('should work correctly', () => {
    const wrapper = mount({
      template: `<div></div>`,
      plugins: [MyPlugin],
    });

    // 断言
  });
});

运行测试

运行测试：
```
pnpm test
```

发布到 NPM

更新 package.json

添加以下字段：

{
  "name": "my-plugin",
  "version": "1.0.0",
  "description": "My awesome JavaScript plugin",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "keywords": ["vite", "vue3", "npm", "pnpm", "ts", "JavaScript plugins"],
  "author": "Your Name",
  "license": "MIT",
}