首发于 语雀文档
<a name="D0c8t"></a>
背景：
前端同事前辈写了一个提供给其他部门的 JS 插件，写的是提供给前端使用的工具类，使用的是 commonjs 规范，导出变量使用的是 module.exports = {} 的方式，使用的是 webpack 打包，打出的包可正常通过 script 标签引入使用，但无法通过 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用。<br /><br />
<a name="uRqbU"></a>
过程：
鉴于前辈说不需要理会他的 webpack config（他也没发给我），叫我使用之前封装库一贯使用的 dumi 进行打包改造。<br />遂未进行一步研究他的 webpack config，分析问题出处，直接使用 dumi 进行封装了。<br />
<a name="x9adD"></a>
发现新问题（如题）：
我们主要需要两类包，<br />一是提供给工程化项目使用的包，即 commonjs 规范 / es6 规范；<br />二是提供给非工程化项目使用的包，支持直接在浏览器 script 引入使用的 umd 规范；<br />
我使用 dumi 搭建起工程后，直接将前辈写好的代码复制进去，再写个使用 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用的 demo，运行正常，解决了前辈的 webpack 打包中未处理到的一个痛点。<br />
dumi 默认不打 umd 规范的包，需要我自行在 .fatherrc 中配置，我是这么配置的：
1// .fatherrc.ts 2export default { 3 esm: { 4 type: 'rollup', 5 minify: true, 6 }, 7 cjs: { 8 type: 'rollup', 9 minify: true, 10 }, 11 umd: { 12 name: 'blueju-sdk', 13 file: 'blueju-sdk', 14 sourcemap: false, 15 globals: { 16 'blueju-sdk': 'blueju', 17 }, 18 minFile: true, 19 }, 20};
然而报错了：
1index.umd.js:28 Uncaught ReferenceError: require is not defined 2 at index.umd.js:28 3 at index.umd.js:3 4 at index.umd.js:4 5(anonymous) @ index.umd.js:28 6(anonymous) @ index.umd.js:3 7(anonymous) @ index.umd.js:4
我是参考 @antv/l7 的打包配置配的，按理来说，不可能有问题。
参考：https://github.com/antvis/L7-boundary/blob/master/.fatherrc.ts
后来发现，问题出在 rollup：<br />我们不应该将 commonjs 和 es6 混用，而且 rollup 其实并不支持 commonjs，在不借助 @rollup/plugin-commonjs 插件的帮助下。<br />最常见错误就是：使用 module.exports 导出和 require 引入。<br />
其实根源是 require 引入这个原因的变形错误，我之前遇到过，没记下来，印象不深刻。<br />
参考：