没有默认导出的 Webpack 2 ES6 导入 UMD

Question

我正在尝试使用 Webpack 2 和 ts-loader 导入 UMD 库。它曾经使用 Webpack 1 和 Rollup（没有 TypeScript）工作，但 Webpack 2 在调用导入函数时附加 .default。

例如：

import canvg from 'canvg';
canvg();

变身

var canvg_1 = require("canvg");
canvg_1.default();

我得到 Uncaught TypeError: canvg_1.default is not a function。

如何解决？

Answer 1

使用 babel-plugin-add-module-exports 您可以确保一切正常。

https://www.npmjs.com/package/babel-plugin-add-module-exports

Answer 2

问题出在 TypeScript 配置中，我在我的 tsconfig.json 中添加了一个 module: 'es2015' 并且它起作用了。另外 allowSyntheticDefaultImports: true 在某些情况下可能会有所帮助（在我的情况下不是必需的，@alejandro-garcia-anglada 描述的 babel-plugin-add-module-exports 的一些模拟）。

{
    "compilerOptions": {
        "module": "es2015",
        "allowSyntheticDefaultImports": true
    }
}

没有默认导出的 Webpack 2 ES6 导入 UMD

Webpack 2 ES6 import UMD without default export

javascript

typescript

webpack

ts-loader

es6-modules