vite-plugin-monkey icon indicating copy to clipboard operation
vite-plugin-monkey copied to clipboard

使用`unplugin-vue-components`会导致`externalGlobal`失效

Open yzqdev opened this issue 1 year ago • 1 comments

使用unplugin-vue-components会导致externalGlobal失效

复现仓库 https://github.com/yzqbugs/monkey-bug

具体操作

我的vite配置 https://github.com/yzqbugs/monkey-bug/blob/main/vite.config.ts 不使用

import { ElMessageBox ,ElButton,ElDialog} from 'element-plus'

导入(见App.vue)

pnpm build则会生成一个不带ElementPlus的monkey-bug.user.js,大小为202.07 kB,并且,这个use.js内部会添加ElMessageBox ,ElButton,ElDialog的代码,即elemen-plus没有使用cdn

如下面的图片,打包出来,没有element-plus的exportVarName(ElementPlus)

如何使external生效?

此时,把App.vue里面的

//import { ElMessageBox ,ElButton,ElDialog} from 'element-plus'

注释去掉,重新打包,体积为3.39 kB

搜了unplugin-vue-components的issue,貌似不是unplugin-vue-components的原因

https://github.com/unplugin/unplugin-vue-components/issues?q=external

yzqdev avatar May 03 '24 20:05 yzqdev

  1. update vite-plugin-monkey version to 4.0.0-alpha.1 in package.json
  2. update field element-plus to element-plus/es in vite.config.ts
- "element-plus": cdn.npmmirror(
+ "element-plus/es": cdn.npmmirror(

lisonge avatar May 25 '24 16:05 lisonge

Is this problem solved?

lisonge avatar May 29 '24 09:05 lisonge

Now it works well, thank you!

  1. update vite-plugin-monkey version to 4.0.0-alpha.1 in package.json
  2. update field element-plus to element-plus/es in vite.config.ts
- "element-plus": cdn.npmmirror(
+ "element-plus/es": cdn.npmmirror(

yzqdev avatar May 29 '24 10:05 yzqdev

https://github.com/lisonge/vite-plugin-monkey/releases/tag/v4.0.0

lisonge avatar May 29 '24 11:05 lisonge