Angular2 的 TypeScript 到 JavaScript 转译器

Posted 2023-02-16

【中文标题】Angular2 的 TypeScript 到 JavaScript 转译器

【英文标题】：TypeScript to JavaScript transpiler for Angular2

【发布时间】：2017-02-09 15:47:26

【问题描述】：

由于 Ancular2 是用 TypeScript 编写的，我也用 TypeScript 编写我的应用程序。 我想在没有运行 node.js 的 tomcat 服务器上部署应用程序。 经过长时间的搜索，我发现了两种可行的可能性： http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview 在这个版本中，Typescript 文件是即时转换的，这可以满足我的需要。 但是会有一个更好的解决方案，在服务器上部署之前对其进行转译和缩小。我用 gulp 进行了尝试，但生成的 .ts 文件（无论是否缩小）都不起作用。 然后我找到了另一个只有 js-files 工作的 plunker： https://plnkr.co/edit/8lOtCy4GPsq9hZH6D38E?p=preview 比较这些文件，我发现我编译的文件看起来要复杂得多：

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) 
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
;
var core_1 = require("@angular/core");
var AppComponent = (function () 
    function AppComponent() 
        this.name = 'Angular';
    
    return AppComponent;
());
AppComponent = __decorate([
    core_1.Component(
        selector: 'my-app',
        template: "<h1>Hello name</h1>"
    )
], AppComponent);
exports.AppComponent = AppComponent;

所以我尝试了不同的 tsconfig.json 属性来获得一个可以工作的转译器，但它似乎与转译器本身有关（我对这两种变体都使用了 typescript@2.1.6 版本）

我已经在 tsconfig.json 中尝试过使用模型：amd、umd、system、commonjs、es2015，但这并没有解决问题。 我也尝试使用 noEmeritHelpers，但问题仍然存在（我认为我曾经读过 var core_1 = require("@angular/core"); 未定义的问题，但这对我没有帮助）。

我想从我的 app 文件夹中转译所有 .ts 文件，将它们合并为一个，然后将其缩小。最好的方法是使用 gulp，因为这很容易与我的 maven 项目结合。

【参考方案1】：

使用 Angular CLI

https://github.com/angular/angular-cli

编辑angular-cli.json 配置文件

"outDir": "path/to/maven-app/main/resources/webapp",

那么你可以运行ng build --prod --watch 或ng build --watch

然后构建您的 maven 应用程序，它将包含所有构建文件：js、css、资产等

【讨论】：

用 --prod 启动它有什么区别？

此标志启用生产模式，基本上您可以使用树鲨、缩小代码、捆绑代码等配置输出。您可以在 Angular cli 的 github 页面中阅读更多内容。顺便说一句，这个工具非常适合开始构建 Angular 应用程序

您是否也知道是否可以在 angularJS 应用程序中使用来自服务器的 freemarker 模板？意思是某些内容不能作为硬编码的内容提供？

我认为不可以，您可以将来自服务器的 html 响应绑定到 Angular 组件，但对于动态模板绑定，这是不可能的。

只是通知您，我发现了一种绑定动态模板（内容+模板）的可能性。我正在使用 magnolia CMS，它允许我呈现页面和组件。因此，我可以使用组件的渲染 URL 将其与 AngularJS 绑定。