半山烟雨的博客

Appearance

可维护性差 ​

假如有一个 foo.ts 文件如下

typescript
class Foo {}
export default Foo;

在使用的时候使用 ES6 的模块导入语法

typescript
import Foo from './foo';

这时候如果将 foo.ts 中的 Foo 改为 Bar，使用处并不会提示默认导出的模块已改变。

与 CommonJS 的交互性比较差 ​

同样的例子如果我们在使用 Foo.ts 的时候使用 CommonJS 的导入语法

typescript
const { default: Foo } = require('module/foo');
// 或
const Foo = require('module/foo').default;

这是一个糟糕的体验。

不同打包工具将 ES Module 转 CommonJS 的表现不同 ​

typescript
// 目标文件
function lib() {}
export default lib;

// 使用tsx或babel，通常将export default进行如下编译
('use strict');

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.default = lib;

function lib() {}

// 使用rollup，通常将export default进行如下编译
('use strict');

function lib() {}

module.exports = lib;

这时候就存在问题了

typescript
// 使用tsx或babel后的导入方式
const lib = require('lib').default; // 正常

// 使用rollup后的导入方式
const lib = require('lib').default; // undefined

参考：