TS 项目踩坑

ESM导入CJS模块 报错问题

代码 & 现象

import EventEmitter from 'eventemitter3';

const Bus = new EventEmitter();
export default Bus;

使用import 打包结果如下

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var eventemitter3_1 = require("eventemitter3");
var Bus = new eventemitter3_1.default();
exports.default = Bus;

eventemitter3_1.default === undefined // true

最终报错eventemitter3_1.default 不是一个构造函数。

原因

兼容问题的产生是因为 esm 有 default 这个概念，而 cjs 没有。任何导出的变量在 cjs 看来都是 module.exports 这个对象上的属性，esm 的 default 导出也只是 cjs 上的 module.exports.default 属性而已

解决

ts配置中加上esModuleInterop: true.