Closed mudssky closed 1 year ago
看了一下,插件v2使用库模式,你使用的 unplugin-auto-import 貌似对库模式支持不是很好,导致编译的代码出现语法错误
你可以暂时使用 "vite-plugin-monkey": "^3.0.0-alpha.0",
,它不使用库模式,这个可以使得打包出来的代码正常运行,我已经运行测试过
另外我排除了 element-plus 貌似构建产物大小还是很大,这个后续得看看
externalGlobals: {
vue: cdn
.jsdelivr('Vue', 'dist/vue.global.prod.js')
.concat(await util.fn2dataUrl(() => {
// @ts-ignore
window.Vue=Vue
})),
'element-plus': cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'),
},
externalResource: {
'element-plus/dist/index.css': cdn.jsdelivr(),
},
打包以后复制到油猴脚本里面刷新页面。
你可以使用 pnpm preview
自动打开或复制链接安装,不必完全复制脚本
体积大是因为引入了一个json校验的库ajv,去掉打包是13kb
体积仍然很大是因为 unplugin-auto-import 生成的代码是
import { ElInput as __unplugin_components_0 } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/input/style/css';
排除的依赖是 element-plus ,但是 unplugin-auto-import 使用的是 element-plus/es
另外 unplugin-auto-import 已经帮你按需引入样式了,再设置 externalResource['element-plus/dist/index.css'] 实际上重复了
externalGlobals: {
vue: cdn.jsdelivr('Vue', 'dist/vue.global.prod.js').concat(
await util.fn2dataUrl(() => {
// @ts-ignore
window.Vue = Vue
}),
),
'element-plus': cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'),
'element-plus/es': 'ElementPlus',
},
另外不知道为什么设置这样之后,这个 unplugin-auto-import 产出的代码有这种
import {
resolveComponent as _resolveComponent,
} from 'vue'
这个 _resolveComponent 没有在代码里使用导致 rollup 发出了一个警告,这个警告可以通过设置 viteConfig.build 关闭
build: {
rollupOptions: {
onwarn(warning, defaultHandler) {
if (warning.code == 'UNUSED_EXTERNAL_IMPORT') return
defaultHandler(warning)
},
},
},
我现在不用那个自动导入的插件了,直接全局引用,问题解决了
import ElementPlus from 'element-plus'
app.use(ElementPlus)
build: {
externalGlobals: {
vue: cdn.jsdelivr('Vue', 'dist/vue.global.prod.js').concat(
// @ts-ignore
await util.fn2dataUrl(() => {
// @ts-ignore
window.Vue = Vue
}),
),
'element-plus': cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'),
},
externalResource: {
'element-plus/dist/index.css': cdn.jsdelivr(),
},
},
ok
开发时候是正常运行的,但是打包以后复制到油猴脚本里面刷新页面。 有一个
Uncaught SyntaxError: Unexpected token ','
这样的报错 我试了一下把tsconfig的target改成es5,还有取消cdn,build出来的还是报错。这个是项目地址 https://github.com/mudssky/highlight-keywords