Vite 打包项目(四) : 封装一个简单的 Plugin

Vite 打包项目(四) : 封装一个简单的 PluginVite 打包项目(四) : 封装一个简单的 Plugin

要封装一个简单的 Vite 插件，你需要遵循 Vite 插件的开发规范和 API。下面是一个创建简单 Vite 插件的步骤，假设你要创建一个在构建过程中在 JavaScript 文件中添加注释的插件：

1. 创建一个新的 npm 项目（如果尚未创建）：

mkdir my-vite-plugin
cd my-vite-plugin
npm init -y

2. 在项目中安装 Vite 依赖：

npm install vite --save-dev

3. 创建一个 vite.config.js 文件，该文件将包含 Vite 插件的配置信息。在该文件中，你需要导出一个 Vite 插件对象，该对象至少包含 name 和 enforce 字段：

// vite.config.js
module.exports = {
  plugins: [
    myVitePlugin()
  ]
}

function myVitePlugin() {
  return {
    name: 'my-vite-plugin',
    enforce: 'pre', // 插件类型，'pre' 表示在构建过程中的前置插件
    // 插件的 transform 方法将在构建过程中执行
    transform(code, id) {
      if (id.endsWith('.js')) {
        // 在 JavaScript 文件中添加注释
        return `/* My Custom Comment */\n${code}`;
      }
    }
  };
}

4. 创建一个 JavaScript 文件来定义你的 Vite 插件。在这个文件中，你可以定义插件的行为和逻辑。在上述示例中，我们在 JavaScript 文件中添加了一个自定义注释。
5. 在项目的根目录下运行 Vite 开发服务器：

bashCopy code
npm vite

现在，当你在项目中构建 JavaScript 文件时，你的 Vite 插件将在构建过程中添加自定义注释。