CommonJS 模块的同构导入答案

【问题标题】：Isomorphic import of CommonJS modulesCommonJS 模块的同构导入
【发布时间】：2018-06-22 21:26:25
【问题描述】：

我编写了一个小型库，可以在浏览器和服务器上运行。该库反过来使用作为 CommonJS 模块发布的 npm 库（例如 lodash.isequal）。

我想以两种不同的方式编译库：

使用tsc，生成commonjs模块供服务器使用
通过webpack，使用awesome-typescript-loader，生成es6模块供webpack打包

根据docs，导入覆盖module.exports的CommonJS库的正确方法如下：

import isEqual = require('lodash.isequal');

但是对于第二个编译案例，打字稿抱怨

错误 TS1202：以 ECMAScript 模块为目标时无法使用导入分配。考虑使用 'import * as ns from "mod"'、'import {a} from "mod"'、'import d from "mod"' 或其他模块格式。

通过将代码生成导入为：

import * as isEqual from 'lodash.isequal';

但这需要禁用类型检查，否则 typescript 会报出如下错误：

错误 TS2497：模块 '"/home/user/ts-mod-test/node_modules/@types/lodash.isequal/index"' 解析为非模块实体，无法使用此构造导入。

【问题讨论】：

标签： node.js typescript webpack es6-modules

【解决方案1】：

从 TypeScript 2.7 开始，这个问题可以通过使用合成默认导入来解决。使用esModuleInterop 标志，isEqual（和类似的模块）可以像在 babel 和 webpack 中一样被导入：

import isEqual from 'lodash.isequal';

对于将 module 选项设置为 es6 的 webpack，导入将保持原样，webpack 本身将处理合成默认值。对于node，module设置为CommonJS，对应的emit是const lodash_isequal_1 = __importDefault(require("lodash.isequal"));，__importDefault处理像Babel这样的非es模块情况

【讨论】：