Question

是否可以仅使用ES5在Angular中进行AOT编译？

更重要的是，我可以将NGTools Webpack plugin与ES5一起使用吗？

我知道TypeScript是Angular的首选语言，但是我的工作地点并未批准使用TypeScript作为Angular项目。我的手有点束缚，因此我不希望客户的性能受到影响。

我项目的一些相关信息：

用于构建/打包的Webpack 2
使用Babel

我看了一遍，但未能找到明确的答案，我真的很感激任何人都能提供的信息。

提前致谢！

Answer 1

在tsconfig.json文件中，将目标设置为es5。

    "target": "es5",

Answer 2

Angular 假设完全兼容ES5。

AOT编译过程使用附加到组件的元数据。这就是它如何找到需要编译的模板和样式。

TypeScript是编写组件的首选方法。因为它允许您使用@Component注释函数来附加元数据。

ES6是辅助方法，Angular支持ES6装饰器将元数据附加到组件。

ES5更基本。没有任何自动方式来附加元数据，但AOT编译器将查找附加到对象原型的annotations数组。

这是使用ES5

的方法

HeroComponent.annotations = [
     new ng.core.Component({
        selector: 'hero-view',
        template: '<h1>{{title}}: {{getName()}}</h1>'
     })
];

所以回答你的问题。是，您仍然可以将AOT与ES5一起使用。

Answer 3

由于您的原始代码是ES2015，您可以直接在ES2015 JavaScript代码上使用AOT编译器。你在类上使用了装饰器的地方。您可以直接从AOT编译器编译到ES5，而无需先使用Babel。大多数角度库也使ES5目标与旧版浏览器兼容。为此，您可以在tsconfig.json中设置已提到的设置

"target": "es5",

还查看有关AOT的官方文章。 AOT Compiler

AOT编译器本质上是一个打字稿编译器，具有附加功能，它也适用于JavaScript。 JavaScript代码在TypeScript中也有效。查看TypeScript教程的第一个示例。 TypeScript in 5 minutes

我已经对此进行了一些实验，对我而言，如果我将.js文件更改为.ts而不更改代码，则可行。 TypeScript编译器还有一个支持.js文件的选项。

"allowJs": true,

从我的测试中看起来AOT编译器忽略了这一点，因为如果我使用.js文件我会收到错误，所以我认为你需要将文件重命名为.ts，如前所述。我正在使用NGTools webpack插件进行测试。

如果您仍想使用Babel进行ES5转换，您可以将打字稿/ AOT编译器的目标设置为ES2015，这样输出仍然是ES2015代码，然后在AOT编译后将其提供给Babel。

使用ES5进行AOT（Ahead-Of-Time）编译

3 个答案: