Angular AOT/Rollup 具有没有默认导出的模块（如 immutable.js、moment.js）

Question

我尝试调整我的 angular 应用程序以准备好进行 AOT 编译和 Tree Shaking（汇总）。但是我在使用没有默认导出的模块时遇到了问题（immutable.js、moment.js、...）。根据 typscript（看 here），只能通过以下语句使用此类模块：import x = require('x') 或 import * as x from 'x' 但是这两个语句在汇总过程中都会导致问题。在某些情况下，我在汇总期间收到错误：Cannot call a namespace ('x')，在某些情况下，我收到运行时错误：x is undefined

在这里你可以找到我的 rollup-config.js 和 tsconfig-aot.json tsconfig-aot_rollup-config.zip

我需要一种在 AOT 编译和汇总期间使用 immutable.js、moment.js 等包的方法。有办法吗？

谢谢！

Answer 1

Rollup 仅适用于 es6。尝试在您的 tsconfig 中更改目标：

"target": "es6"

汇总完成后，您可以使用 typescript 将包编译为 es5，并使用选项 allowJs: true。

p.s。 require 是一个 Webpack-way，Rollup 使用 es6 导入语法。

Answer 2

我发现在 rollup-config.js 中，在 ts cookbook 中，他们确实在 commonJs 包含中专门放置了 rxjs。如果您更改为仅包含 rxjs，它也会处理第 3 方模块。

例如，我使用的是angular2-materialize，所以：

commonjs({
  include: [
    'node_modules/rxjs/**',
    'node_modules/angular2-materialize/**'
  ],

或简单地包括所有（发现更好，测试 build.js，大小相同）：

commonjs({
  include: 'node_modules/**'
})

Answer 3

更新

我运行对我之前的回答有疑问。这是我找到的解决方案，它适用于 SystemJs 和使用 AoT/rollup.

我的导入语句如下：

import * as moment from 'moment';
const momentJs = (moment as any).default ? (moment as any).default : moment;

然后，在您的代码中，像这样使用它：

const startDateString = momentJs(startDate).format('YYYY-MM-DD');

这是由于 SystemJs 和 Rollup 使用两种不同的方法来解析没有默认导出的导入模块。

我有两个 TypeScript 配置文件，一个用于 systemJs，另一个用于运行 AoT 构建。他们都在 compilerOptions

中设置了这个标志

"allowSyntheticDefaultImports": true

（上一个答案）

我运行进入了这个确切的问题。我能够让它与以下内容一起工作：

var moment = require('moment'); //works

相对于

import moment from "moment"; // won't work

或

import moment = require('moment'); //won't work

在我的汇总配置中，我还有：

commonjs({
        include: [
            'node_modules/rxjs/**', 
            'node_modules/moment/**', 
            'node_modules/hammerjs/**'
        ]
    }),

给我指明正确方向的是一个类似的问题。

上述解决方案适用于 SystemJs 和 Angular 的 AoT/Rollup 进程。由于它不是导入模块的 'typical' typescript 方式，所以感觉有点 hack-ish，但它让我解决了这个问题。

Angular AOT/Rollup 具有没有默认导出的模块（如 immutable.js、moment.js）

Angular AOT/Rollup with modules which have no default export (like immutable.js, moment.js)

momentjs

typescript

immutable.js

angular2-aot

angular