vite-plugin-monkey 使用教程

vite-plugin-monkey 使用教程

vite-plugin-monkeyA vite plugin server and build your.user.js for userscript engine like Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-monkey

1. 项目介绍

vite-plugin-monkey 是一个Vite插件，它旨在帮助开发者构建用于Tampermonkey、Violentmonkey或Greasemonkey等用户脚本引擎的JS文件。这个插件提供了服务器模式和构建功能，支持热重载，动态导入，并且可以方便地注入全局API。

2. 项目快速启动

初始化项目

你可以使用以下命令来创建一个新的基于vite-plugin-monkey的项目：

# 使用pnpm
pnpm create monkey
# 或者使用npm
npm create monkey
# 或者使用yarn
yarn create monkey

接着，选择合适的模板，如JavaScript、TypeScript或其他框架的模板。

安装依赖

在你的项目中添加vite-plugin-monkey作为开发依赖：

pnpm add -D vite-plugin-monkey
# 或者
npm install -D vite-plugin-monkey
# 或者
yarn add -D vite-plugin-monkey

启动开发服务器

在你的vite.config.js配置文件中引入并使用vite-plugin-monkey，确保它是插件列表中的最后一个项目：

// vite.config.js
import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';

export default defineConfig({
  plugins: [
    ...其他插件,
    monkey()
  ]
});

然后，运行Vite的开发服务器：

vite

构建用户脚本

使用Vite构建你的用户脚本：

vite build

3. 应用案例和最佳实践

• 设置全局变量：可以通过monkeyConfig配置项注入GM系列API。例如，在服务端启用mountGmApi：

  // vite.config.ts
  import { defineConfig } from 'vite';
  import monkey from 'vite-plugin-monkey';
  
  export default defineConfig({
    plugins: [
      monkey({
        server: {
          mountGmApi: true
        }
      })
    ]
  });
  

• 处理动态导入：当使用动态导入时，需要通过entry配置项指定入口文件。

  // vite.config.ts
  import { defineConfig } from 'vite';
  import monkey from 'vite-plugin-monkey';
  
  export default defineConfig({
    plugins: [
      monkey({
        entry: '/src/main.ts'
      })
    ]
  });
  

• 与vite-legacy兼容：在与@vitejs/plugin-legacy一起使用时，确保设置renderLegacyChunks为false以避免冲突。

  import legacy from '@vitejs/plugin-legacy';
  import { defineConfig } from 'vite';
  import monkey from 'vite-plugin-monkey';
  
  export default defineConfig({
    plugins: [
      legacy({
        renderLegacyChunks: false,
        modernPolyfills: true
      }),
      monkey({
        entry: '/src/main.ts'
      })
    ]
  });
  

4. 典型生态项目

虽然没有明确的典型生态项目列出，但vite-plugin-monkey通常被用来构建各种Tampermonkey或类似用户的脚本，这些脚本可以扩展浏览器功能，比如自动化任务、网站增强等。你可以在GitHub上搜索相关的用户脚本项目，看看如何结合vite-plugin-monkey实现这些功能。

---

以上就是关于vite-plugin-monkey的基本使用教程。通过这些步骤，你应该能够有效地使用这个插件开发和构建用户脚本了。如果你遇到任何问题，记得查阅项目官方文档或在GitHub仓库上寻找帮助。

vite-plugin-monkeyA vite plugin server and build your.user.js for userscript engine like Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-monkey