自学打包组件库的迷茫

自学打包组件库的迷茫

老师,你好,我现在在对element-ui进行二次封装,我想做成一个常用的业务组件库,但是我用webpack打包出来文件,在项目中引用的时候,

1、热更新的时候会报错,需要重新npm run,

2、我在组件库用 import { Button, Select, Image } from 'element-ui'的方式使用elm组件,在打包之后会显示这些组件是undefined,从而无法正常使用组件。

1、还有一个很奇怪的点,我在开发这些组件的项目引用,可以正常使用,但是在公司的项目中引用就会报上面说到的2点的错误。

2、就算开发组件的项目可以使用也基于把文件复制到项目目录中,如果是npm lnstall / link的方式的话,会一些组件,例如el-table无法渲染数据。


package.json

https://img1.sycdn.imooc.com//climg/6332ea170927306105730626.jpg

搜索

复制

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
张轩 2022-09-29 10:07:45

同学你好

我简单的看了一下你的组件库

你在打包的时候生成的是 umd 格式,并且打包的时候省略了原本的组件库(element-ui), 你webpack配置 externals  的内容,这样就会导致你全新使用的时候,并没有安装这个本体,导致一些错误。这应该就是你说的奇怪的点的问题。


建议发布组件库的时候,将 element-ui 作为 dependencies 或者 peerDependencies。

  • 提问者 热爱学习又爱玩 #1

    老师,您说的全新使用,指的是在没有安装element-ui的项目中引用组件库吗?

    我是在有安装element-ui的的项目中引用的。

    dependencies / peerDependencies 我查了一下是 install 组件库的时候会自动下载相关依赖,不过这两个配置和组件库是否成功引用element-ui有关吗?还是仅是自动下载element-ui而已?

    搜索

    复制

    2022-09-29 19:27:09
  • 张轩 回复 提问者 热爱学习又爱玩 #2

    我记得我们课程中有讲的,dependencies 是会自动下载,peerDependencies 是会有一个提示,提示你要下载才能正常使用。

    2022-09-30 09:19:44
张轩 2022-09-28 09:40:13

同学你好

请问能否提供一下你组件库的代码让我们在本地帮你看看呢?光看描述没发很好的了解问题,你可以将其他组件都删除掉,就剩下一两个最简单的说明问题的组件即可 。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师