使用 ES5 进行 AOT（提前）编译答案

【问题标题】：AOT (Ahead-Of-Time) Compilation with ES5使用 ES5 进行 AOT（提前）编译
【发布时间】：2017-11-10 11:23:23
【问题描述】：

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

更重要的是，我可以在 ES5 中使用 NGTools Webpack plugin 吗？

我知道 TypeScript 是 Angular 的首选语言，但是我的工作单位不赞成在我们的 Angular 项目中使用 TypeScript。我的手有点束缚，我不希望客户端的性能因此受到影响。

我的项目的一些相关信息：

用于构建/打包的 Webpack 2
用 ES2015 编写，使用 Babel 转译为 ES5

我已经查看了所有内容，但未能找到明确的答案，我非常感谢任何人提供的任何信息。

提前致谢！

【问题讨论】：

这个问题本身是不正确的。 'Written in ES2015 transpiled to ES5 using Babel' 不等于 'ES5'。不过，目前不可能有任何方式。

标签： javascript angular webpack babeljs ecmascript-5

【解决方案1】：

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>'
     })
];

所以回答你的问题。是的，你仍然可以在 ES5 中使用 AOT。

【讨论】：

aio-staging.firebaseapp.com/guide/…
@yurzui 那么您是在暗示 ThinkingMedia 提供的内容不正确吗？在您的链接中提到，“AOT 目前不是纯 JavaScript 应用程序的选项”。
那太糟糕了。

【解决方案2】：

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

    "target": "es5",

【讨论】：

AOT 编译器只会编译 typescript。

【解决方案3】：

由于您的原始代码是 ES2015，您可以做的是直接在您的 ES2015 JavaScript 代码上使用 AOT 编译器。您在课堂上使用过装饰器的地方。您可以直接从 AOT 编译器编译到 ES5，而无需先使用 Babel。大多数 Angular 库还具有 ES5 目标，以便与旧版浏览器兼容。为此，您在 tsconfig.json 中设置已经提到的设置

"target": "es5",

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

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

我已经对此进行了一些试验，对我来说，如果我将 .js 文件更改为 .ts 而不更改代码，它就可以工作。 TypeScript 编译器还有一个支持 .js 文件的选项。

"allowJs": true,

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

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

【讨论】：