Question

我尝试调整我的角度应用程序，为AOT编译和Tree Shaking（汇总）做好准备。但是我使用没有默认导出的模块（immutable.js，moment.js，...）会遇到问题。根据typscript（look 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

<强>更新

我之前的回答遇到了问题。以下是我在SystemJs中使用AoT /汇总的解决方案。

我的导入声明如下：

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/**'
        ]
    }),

指向正确方向的是environment variable GIT_SSHCOMMAND类似的问题。

上述解决方案适用于SystemJ和Angular的AoT / Rollup流程。感觉有点破解，因为它不是导入模块的“典型”打字方式，但它让我解决了这个问题。

Answer 2

我发现在 rollup-config.js 中，在ts cookbook中，他们确实在commonJs include中添加了rxjs。如果您从仅包含rxjs更改，它也将处理第三方模块。

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

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

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

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

Answer 3

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

ActionBarToggle

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

P.S。 require是一种Webpack方式，Rollup使用es6导入语法。

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

3 个答案: