首发于 语雀文档

背景：

前端共事前辈写了一个提供给其余部门的 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

// .fatherrc.ts
export default {
  esm: {
    type: 'rollup',
    minify: true,
  },
  cjs: {
    type: 'rollup',
    minify: true,
  },
  umd: {
    name: 'blueju-sdk',
    file: 'blueju-sdk',
    sourcemap: false,
    globals: {
      'blueju-sdk': 'blueju',
    },
    minFile: true,
  },
};

​

然而报错了：

index.umd.js:28 Uncaught ReferenceError: require is not defined
    at index.umd.js:28
    at index.umd.js:3
    at index.umd.js:4
(anonymous) @ index.umd.js:28
(anonymous) @ index.umd.js:3
(anonymous) @ index.umd.js:4

​

我是参考 @antv/l7 的打包配置配的，按理来说，不可能有问题。

参考：https://github.com/antvis/L7-boundary/blob/master/.fatherrc.ts

​

起初发现，问题出在 rollup：
**咱们不应该将 commonjs 和 es6 混用，而且 rollup 其实并不反对 commonjs，在不借助 @rollup/plugin-commonjs
插件的帮忙下。
最常见谬误就是：应用 module.exports 导出和 require 引入。**
​

其实本源是 require 引入这个起因的变形谬误，我之前遇到过，没记下来，印象不粗浅。
​

参考：

1. https://github.com/antvis/L7-boundary/blob/master/.fatherrc.ts
2. https://github.com/antvis/L7/issues/483
3. https://github.com/rollup/rollup/issues/1058#issuecomment-254187433
4. https://github.com/rollup/rollup-plugin-commonjs/issues/239
5. https://github.com/umijs/father
6. https://www.rollupjs.com/