组件库es打包出现默认vue引用导致es版本打包结果不可用

Question

老师，我有两个问题
问题一、我现在按照您的配置，打包es, 实际使用import { componentName } from ‘my-library-name’ 的时候报一个错；

No matching export in vue.runtime.esm-bundler.js" for import "default"

看了下生成的js代码, 有一个import xxx, { xxx } from 'vue’
但是我全局搜了我组件封装的代码，没有这样引用vue依赖的语法，不知道这个import 是怎么来的，目前是已经有个10+个组件才遇到这个问题的。我应该怎么排查处理这个问题呢？

问题二、如果我基于ant design 二次封装组件库，需要在您的课程上额外做什么处理吗。

Answer 1

张轩 2024-06-21 08:08:59

同学你好

1 能否提供一下你的源代码（git），我在本地帮你看一下，

2 应该不需要做额外的处理，我记得新版的 ant design 可以比较好的适配 es 的格式。

• 提问者 huedini #1

  老师好，我排查了一下，发现我把一个用了vuedraggable组件去除，就不会有import xxx from 'vue’ 了
  有问题的组件我在总的入口文件里注释了
  
  git地址：
  https://github.com/huedini/smart-ui
  
  
  问题组件目录：
  /packages/image-text-draggable
  
  
  另外我还发现了一个更重要的问题
  我配置了es打包后，另外起一个项目用import { componentName } from '' 
  这样的语法引入，照理说打包应该会tree-shaking, 但实际上把没有引用的代码也打包进去了，导致打包体积很大，老师能不能帮我看下呀。

• 张轩 回复 提问者 huedini #2

  同学你好 你说的另外一个重要的问题，你的另一个项目使用的也是 vite，然后使用的是默认的 vite build 打包的是吗？

• 提问者 huedini 回复 张轩 #3

  回复 张轩：是的，我的另一个项目使用的也是 vite，然后使用的是默认的 vite build 打包的。我开了一个测试项目，用老师的v-element打包，只按需引入了一个Button组件，发现最终打包结果也会有form/form-item组件相关的打包结果，看起来tree-shaking并没有把别的组件的代码去除干净

点开查看后面4条评论