import * as x 的 break change 问题

[sorrycc]

e.g.

import * as x from 'object-inspect';
console.log(x);

webpack 是 function，mako 是 object，{ default: function }。

[stormslowly]

https://yuque.antfin.com/pishu.spf/umi-next-question-and-answer/mf9p4iqzip8o4n0t?singleDoc# 《2023-09-21 interop between CJS and ESM is a mess》

探究

CJS 和 ESM interop 没有一个确定的做法，具体看这里。 https://sokra.github.io/interop-test/#import--as-x 这里可以看到 interop 所涉及的 case 之多之杂，令人悲伤逆流成河。

原始问题的情况看 mako 和其他各个 bundler 的实现。其中 webpack 和 wepack-js 的定义如何下

webpack: ESM-flagged, When using a .mjs file or .js in a package.json context with "type": "module".

webpack-js: automatic ESM, When using a .js without "type": "module" in the package.json context and ESM is automatic-detect (no import or export used).

代入原始问题的例子，各个导出为 (忽略对象类型和是否使用Getter（[G])：

● babel-js: { default: function(){...} } ● esbuild: { default: function(){...} } ● node: { default: function(){...} } ● rollup: { default: function(){...} } ● webpack: { default: function(){...}, esModule: true } ● webpack-js: function() {...} ● webpack4: function() {...} ● webpack4-mjs: { default: function(){...}, esModule: true }

此外我们再参考下，对 module.exports = esbuild 的观点。 https://github.com/evanw/bundler-esm-cjs-tests

结论

暂时不改，先 pending，毕竟目前的行为是大部分 bundler 的实现。 从目前的趋势看，其实不推荐 import * as f from "object-inspect" 的写法。 import f from "object-inspect" 更加合理。

退一万步 如果一定要改，和 webpack 对齐的方式是 判断好 当前 module 的 module type，通过 transform 将现在的 polyfill 除。 from

var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _objectinspect = _interop_require_wildcard._(require("object-inspect"));

to

var _objectinspect = require("object-inspect")

[PeachScript]

周会讨论：

• 能否通过自动检测而非加配置实现？