关于打的 umd 包在使用时,报 require is not defined 错误的问题出处

首发于 语雀文档背景:前端同事前辈写了一个提供给其他部门的 JS 插件,写的是提供给前端使用的工具类,使用的是 commonjs 规范,导出变量使用的是 module.exports = {} 的方式,使用的是 webpack 打包,打出的包可正常通过 script 标签引入使用,但无法通过 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用。​过程:鉴于前辈说不需要理会他的 webpack config(他也没发给我),叫我使.
摘要由CSDN通过智能技术生成

首发于 语雀文档

背景:

前端同事前辈写了一个提供给其他部门的 JS 插件,写的是提供给前端使用的工具类,使用的是 commonjs 规范,导出变量使用的是 module.exports = {} 的方式,使用的是 webpack 打包,打出的包可正常通过 script 标签引入使用,但无法通过 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用。


过程:

鉴于前辈说不需要理会他的 webpack config(他也没发给我),叫我使用之前封装库一贯使用的 dumi 进行打包改造。
遂未进行一步研究他的 webpack config,分析问题出处,直接使用 dumi 进行封装了。

发现新问题(如题):

我们主要需要两类包,
一是提供给工程化项目使用的包,即 commonjs 规范 / es6 规范;
二是提供给非工程化项目使用的包,支持直接在浏览器 script 引入使用的 umd 规范;

我使用 dumi 搭建起工程后,直接将前辈写好的代码复制进去,再写个使用 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用的 demo,运行正常,解决了前辈的 webpack 打包中未处理到的一个痛点。

dumi 默认不打 umd 规范的包,需要我自行在 .fatherrc 中配置,我是这么配置的:

配置项详见:https://github.com/umijs/father#umd


                
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值