Closed Sec-ant closed 1 year ago
vite-plugin-monkey 不支持 umd 模式,而且为了支持 top level await
和 单文件下的 dynamic import
,你的导出会被去掉
如果你想把代码构建为 库,你不应该使用 vite-plugin-monkey
另外我并不推荐在 Greasy Fork 发布库,Greasy Fork 上的库 没有类型声明,不能标准化安装
我更推荐同时构建 esm/iife 并发布在 npm,可以通过 pnpm 安装 也能通过 jsdelivr/unpkg 来 require 使用
谢谢你的解答,单纯构建 UMD 和 ESM 是没问题的,这些我也发布了。用 vite-plugin-monkey 一是有现成的类型可以用写起来比较舒服 😄,二是如果要构建库模式的话还要保留 meta 信息也是用 vite-plugin-monkey 方便。我本来的想法是提供尽可能多的构建产物和安装渠道选择,不过既然 vite-plugin-monkey 不会支持这种方式,那我就先保持现状👌。
这是我正在实现的一个库的构建配置
它构建两种格式 esm/iife ,esm 提供给 vite 使用,iife 可以直接在 @require
引入
两种格式都能在各自的环境里正常访问到 GM API
import { defineConfig } from 'tsup';
const outExtension = (ctx: { format: 'esm' | 'cjs' | 'iife' }) => ({
js: { esm: '.mjs', cjs: '.cjs', iife: '.iife.js' }[ctx.format],
});
export default defineConfig([
{
// for vite import
entry: ['src/index.ts'],
outDir: 'dist',
sourcemap: true,
platform: 'browser',
outExtension,
dts: true,
format: ['esm'],
external: ['vite-plugin-monkey/dist/client'],
},
{
// for @require
entry: ['src/index.ts'],
outDir: 'dist',
sourcemap: true,
platform: 'browser',
outExtension,
dts: false,
format: ['iife'],
minify: true,
globalName: `GmExtra`,
target: 'es2015',
esbuildOptions: (options) => {
options.alias = {
'vite-plugin-monkey/dist/client': 'vite-plugin-monkey/dist/native',
};
},
},
]);
好的,我还没有用过 tsup,后面的项目试一试
与 tsup 无关, vite 也是可行的
vite.esm.config.ts 设置 external
build: {
rollupOptions: {
external: [`vite-plugin-monkey/dist/client`],
},
},
vite.iife.config.ts 设置
resolve: {
alias: {
'vite-plugin-monkey/dist/client': 'vite-plugin-monkey/dist/native',
},
},
即可
与 tsup 无关, vite 也是可行的
vite.esm.config.ts 设置
external
build: { rollupOptions: { external: [`vite-plugin-monkey/dist/client`], }, },
vite.iife.config.ts 设置
resolve: { alias: { 'vite-plugin-monkey/dist/client': 'vite-plugin-monkey/dist/native', }, },
即可
了解了,但是用 external
的话,es 构建产物会存在一句 import { GM_XXX } from "vite-plugin-monkey/dist/client"
,而由于 vite-plugin-monkey
是 devDependencies
,其他人在安装我的包的时候并不会自动安装 vite-plugin-monkey
依赖,如果对方不使用 vite-plugin-monkey
开发的话但使用其它打包工具的话可能会造成一些问题?当然现在能用 es 模块开发油猴脚本 vite-plugin-monkey
应该是最优选择,不过我并不太想限制用户的选择…
如果你不想使用本插件,那你把上面 iife 的配置给到 esm 并且把 client 模块打包进去就行
实际上就算你不给也行,也能直接把 client 模块打包进去的,并且正常运行
client 模块 先在 document 上获取 monkeyWindow ,获取不到直接使用 当前作用域的 window 作为 monkeyWindow ,然后使用 monkeyWindow.GM_ 获取 api ,所以就算你使用 webpack/rollup/esbuild 等其它打包工具,代码运行的时候也能正确使用 GM api
你多试几个配置然后看打包代码产物就知道怎么做了
也就是说,你可以发布 3 种格式
排除 client 依赖的 esm ,给 vite 使用
打包 client 并将 client 替换成 native 的 esm 给 webpack/rollup 等其它工具使用
打包 client 并将 client 替换成 native 的 iife 给 通过 require url 的手写脚本使用
这 3 种格式完全覆盖你的需求
嗯嗯好的,我最后决定 es 把 client 打包进去,iife/umd 用 alias 做替换
Greasy Fork 上是可以发布当作库来使用的用户脚本的。
我在使用 vite-plugin-monkey 插件并想将代码发布为用户脚本库时,用到了
vite
的库模式构建。我遇到的问题是,如果我不指定
build.lib.fileName
或者将build.lib.fileName
指定为字符串形式的文件名时,UMD 构建结果不能把导出的变量注册到全局作用域。只有将它指定为函数形式时才可以构建出正确的 UMD 包(可以在全局作用域访问导出的变量)。请问这个是正确的库模式用户脚本构建方式吗?这是我的
vite.config.ts
文件:这里有一个用来复现的 Demo:
https://stackblitz.com/edit/stackblitz-starters-k8kbgm?file=vite.config.ts