tsconfig之esModuleInterop属性

背景

如下代码

import fs from 'fs';

fs.copyFile('');

esModuleInteropfalse 时,typescript 提示报错如下 TS1192: Module '"fs"' has no default export.

为什么会出现这种报错呢,因为 fs 模块的确没有默认导出。因为 fs 是遵循 cjs 规范写的。即类似于这种导出:

module.exports = fs = {
  copyFile,
  copyFileSync,
}

如何解决

方案一

使用如下方式导入 fs

import * as fs from 'fs'

fs.copyFile('');

可以看下两种不同的导入方式编译后的结果

编译前

import fs from 'fs';
import * as fsBak from 'fs';

fs.copyFile('', '', () => {});
fsBak.copyFile('', '', () => {});

编译后

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = require("fs");
const fsBak = require("fs");
fs_1.default.copyFile('', '', () => { });
fsBak.copyFile('', '', () => { });

看到编译后的结果可以发现使用 import fs from 'fs'; 进行导入的,最终编译调用方法时,会从 default 属性中去调用方法,
因为 import 的默认导入认为模块的导出是使用 export default 进行的。但如果是 commonjs 模块它们并不是这样的。
所以 fs_1.default.copyFile 是不存在的。

方案二

开启 esModuleInteroptrue

编译前

import fs from 'fs';

fs.copyFile('', '', () => {});

编译后

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = __importDefault(require("fs"));
fs_1.default.copyFile('', '', () => { });

可以看出 typescript 生成了一个 __importDefault 函数,它的作用是:
如果目标模块是 esm,就直接返回目标模块;否则将目标模块挂在一个对象的 default 上,返回该对象

var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};

编译前

import * as fsBak from 'fs';

fsBak.copyFile('', '', () => {});

编译后

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
  if (k2 === undefined) k2 = k;
  var desc = Object.getOwnPropertyDescriptor(m, k);
  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
    desc = { enumerable: true, get: function () { return m[k]; } };
  }
  Object.defineProperty(o, k2, desc);
}) : (function (o, m, k, k2) {
  if (k2 === undefined) k2 = k;
  o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
  Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
  o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
  if (mod && mod.__esModule) return mod;
  var result = {};
  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
  __setModuleDefault(result, mod);
  return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const fsBak = __importStar(require("fs"));
fsBak.copyFile('', '', () => { });

可以看出 typescript 生成了一个 __importStar 函数,它的作用是:

  • 如果目标模块是 esm,就直接返回目标模块
  • 否则将目标模块上所有的除了 default 以外的属性挪到 result
  • 将目标模块自己挂到 result.default

总结

esModuleInterop 选项的作用是支持使用 import cjs from 'cjs' 的方式引入 commonjs 包。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wflynn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值