關於打的 umd 包在使用時，報 require is not defined 錯誤的問題出處

首發於 語雀文檔

背景：

前端同事前輩寫了一個提供給其他部門的 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/