build script cannot be executed， build出来的脚本不能执行（vue3+elementUI）

[mudssky]

开发时候是正常运行的，但是打包以后复制到油猴脚本里面刷新页面。 有一个Uncaught SyntaxError: Unexpected token ','这样的报错 我试了一下把tsconfig的target改成es5，还有取消cdn，build出来的还是报错。

这个是项目地址 https://github.com/mudssky/highlight-keywords

[lisonge]

看了一下，插件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 自动打开或复制链接安装，不必完全复制脚本

[mudssky]

体积大是因为引入了一个json校验的库ajv，去掉打包是13kb

[lisonge]

体积仍然很大是因为 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)
      },
    },
  },

[mudssky]

我现在不用那个自动导入的插件了，直接全局引用,问题解决了

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(),
        },
      },

[lisonge]

ok

[lisonge]

v3.0.1