首发于 语雀文档
背景:
前端同事前辈写了一个提供给其他部门的 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 中配置,我是这么配置的: