前言

自从 esm 的模块规范出来之后，开发时的代码基本都是使用 esm 的模块规范，哪怕是开发只在 node 环境使用的包，也会使用 esm 模块规范开发，使用工具转换成 cjs 的模块规范。
由于 esm 模块规范出来的比较晚，好多三方包都是 cjs 模块规范的包，如何在 esm 模块规范的工程中使用 cjs 模块规范的包，是一个大问题。

很多构建工具都为此做了适配：

  1. // 原 cjs 代码
  2. function test(){}
  3. module.exports = test;
  4. exports.a = 123;
  7. /*
  8. 构建工具会进行转换，给其加上 default 属性，以便于 esm import default 时拿到默认导出。
  9. 例如 typescript 的处理：
  10. var __importDefault = (this && this.__importDefault) || function (mod) {
  11.     return (mod && mod.__esModule) ? mod : { "default": mod };
  12. };
  13. */
  16. // 在 esm 工程中使用时
  17. import test from "./a.js"; // test(){}
  18. import { a } from "./a.js"; // 123
  19. import * as all from "./a.js"; // { default: test(){}, a: 123 }
  1. // 由 esm 转换而来的 cjs 语法
  2. "use strict";
  4. Object.defineProperty(exports, "__esModule", {
  5.   value: true
  6. });
  7. exports.default = exports.a = void 0;
  8. function test() {}
  9. var _default = exports.default = test;
  10. const a = exports.a = 123;
  13. /*
  14. 构建工具识别到 __esModule 属性，得知该 cjs 模块是由 esm 转换而来的，自带 default 属性。
  15. 则不再添加 default 属性。
  16. 例如 typescript 的处理：
  17. var __importDefault = (this && this.__importDefault) || function (mod) {
  18.     return (mod && mod.__esModule) ? mod : { "default": mod };
  19. };
  20. */
  23. // 在 esm 工程中使用时
  24. import test from "./a.js"; // test(){}
  25. import { a } from "./a.js"; // 123
  26. import * as all from "./a.js"; // { default: test(){}, a: 123 }

构建工具的适配

typescript

typescript 工具需要配置一些相关的属性才能正确加载 cjs 模块。

  1. // ts.config.json
  3. {
  4.     "compilerOptions": {
  5.         "allowSyntheticDefaultImports": true,
  6.         "esModuleInterop": true
  7.     }
  8. }
  1. // 处理方式如下：
  3. var __importDefault = (this && this.__importDefault) || function (mod) {
  4.     return (mod && mod.__esModule) ? mod : { "default": mod };
  5. };

babel

babel 默认自动转换，不用额外配置。

  1. // 处理方式如下：
  3. function _interopRequireWildcard(e, r) {
  4.   if (!r && e && e.__esModule) return e;
  5.   if (null === e || ("object" != _typeof(e) && "function" != typeof e))
  6.     return { default: e };
  7.   var t = _getRequireWildcardCache(r);
  8.   if (t && t.has(e)) return t.get(e);
  9.   var n = { __proto__: null },
  10.     a = Object.defineProperty && Object.getOwnPropertyDescriptor;
  11.   for (var u in e)
  12.     if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) {
  13.       var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
  14.       i && (i.get || i.set) ? Object.defineProperty(n, u, i) : (n[u] = e[u]);
  15.     }
  16.   return (n["default"] = e), t && t.set(e, n), n;
  17. }

webpack

webpack 也默认做了自动转换，不需要额外配置。

  1. // 处理方式如下：
  3.     (() => {
  4. /******/         // getDefaultExport function for compatibility with non-harmony modules
  5. /******/         __webpack_require__.n = (module) => {
  6. /******/             var getter = module && module.__esModule ?
  7. /******/                 () => (module['default']) :
  8. /******/                 () => (module);
  9. /******/             __webpack_require__.d(getter, { a: getter });
  10. /******/             return getter;
  11. /******/         };
  12. /******/     })();

node

当用 node 直接执行 esm 语法时，当引入的是个原始的 cjs 模块时，也会自动转换拿到默认导出为 module.exports。但是当引入的是一个经过 esm 转译过来的 cjs 模块时，node 不像其他构建工具那样判断 __esModule属性，仍会继续添加 default属性，导致如下效果：

  1. import test from "./a.js"; // { default: test(){}, a: 123 }
  2. import * as all from "./a.js"; // { default: { default: test(){}, a: 123 } }

这是 node 本身的问题，node 暂时不适配业界公认的 __esModule属性。详见 nodejs issue。

解决方式是和 前一篇文章 最后的解决方案一样，可以解决这个问题。但一般情况下，import 语法只使用于前端工程，前端工程的构建工具都会自动转换。node 环境直接执行 esm 很少。