typescript中的esModuleInterop选项

郝郝生活 發表於 2020-1-3 11:50:00

当没有加esModuleInterop时
库的代码：
<div class="cnblogs_code">
<pre>export const a = 1;
export default function b() {}</pre>
</div>
生成代码
<div class="cnblogs_code">
<pre>exports.__esModule = true;
exports.a = 1;
function b() { }
exports["default"] = b;</pre>
</div>
 
使用库的代码：
<div class="cnblogs_code">
<pre>import * as lib from './export';

console.log(lib);</pre>
</div>
生成代码
<div class="cnblogs_code">
<pre>exports.__esModule = true;
var lib = require("./export");
console.log(lib);</pre>
</div>
<div class="cnblogs_code">
<pre>import lib from './export';

console.log(lib);</pre>
</div>
生成代码
<div class="cnblogs_code">
<pre>exports.__esModule = true;
var export_1 = require("./export");
console.log(export_1["default"]);</pre>
</div>
<pre>以上代码使用ts生成代码都是可以的。 但是如果我们使用的库是第三方的，比如fs。我们的代码如下</pre>
<div class="cnblogs_code">
<pre>import fs from 'fs';

console.log(fs);</pre>
</div>
生成代码
<div class="cnblogs_code">
<pre>exports.__esModule = true;

var fs_1 = require("fs");
console.log(fs_1["default"]);</pre>
</div>
fs是没有default属性的，所以这种使用fs的方法是不对的。
所以，不加esModuleInterop时，正确引用fs的方法是下面这样：
<div class="cnblogs_code">
<pre>import * as fs from 'fs';
console.log(fs);

// 或者

import {fsync} from 'fs';
console.log(fsync);</pre>
</div>
 
加上esModuleInterop，代码
<div class="cnblogs_code">
<pre>import * as lib from './export';

console.log(lib);</pre>
</div>
编译为：
<div class="cnblogs_code">
<pre>var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result = mod;
result["default"] = mod;
return result;
};
exports.__esModule = true;
var lib = __importStar(require("./export"));
console.log(lib);</pre>
</div>
代码
<div class="cnblogs_code">
<pre>import lib from './export';

console.log(lib);</pre>
</div>
编译为
<div class="cnblogs_code">
<pre>var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
exports.__esModule = true;
var export_1 = __importDefault(require("./export"));
console.log(export_1["default"]);</pre>
</div>
这时
<div class="cnblogs_code">
<pre>import fs from 'fs';

console.log(fs);</pre>
</div>
就可以正常使用了。
 
总结：
因为很多老的js库使用了commonjs的导出方式，并且没有导出default属性，而是使用module.exports=xxx直接导出，这样会导致 import fs from 'fs';的语法引入失败。
typescript为了兼容这些js库，于是引入了esModuleInterop，使import fs from 'fs'能正常使用。
  
来源：https://www.cnblogs.com/chen8840/p/12144202.html

頁: [1]

琼殿技术论坛's Archiver

typescript中的esModuleInterop选项