用于Angular2的TypeScript JavaScript转换器 [英] TypeScript to JavaScript transpiler for Angular2

问题描述

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

 use strict; var __decorate =（this&& this .__ decorate）||函数（装饰器，目标，键，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（decorator，target，key，desc）; （d = decorators [i]）r =（c <3d（r）：c> 3d（i = （target，key，r）：d（target，key））|| R等返回c> 3&& r&& amp;& Object.defineProperty（target，key，r），r;}; var core_1 = require（@ angular / core）; var AppComponent =（function（）{function AppComponent（）{this.name ='Angular';}返回AppComponent;}（））; AppComponent = __decorate（[core_1.Component（{selector：'my-app'，template：< h1> Hello {{name}}< / h1>}）]，AppComponent ）; exports.AppComponent = AppComponent;  

所以我尝试了不同的tsconfig .json属性来获得一个工作的转译器，但它似乎是与transpiler本身的东西（我用于两种变体typescript@2.1.6版本）

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

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

使用Angular CLI

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

编辑 angular-cli.json 配置文件

$ b $

 outDir：path / to / maven-app / main / resources / webapp，
  

然后你可以运行 ng build --prod --watch 或 ng build --watch

然后构建你的maven应用程序，它将包含所有的构建文件：js，css，assets等

Since Ancular2 is written in TypeScript, I also write my app in Typescript. I want to deploy the app on a tomcat server without node.js running. After a long search, I found two possibilities that work: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview In this version, the Typescript-files are transpiled on-the-fly and this is works for what I need. But there would be a nicer solution with transpiling and minifying it before the deployment on the server. I tryed it with gulp but the resulting .ts-files (with and without minifying) didn't work. then I foung another plunker with only js-files working: https://plnkr.co/edit/8lOtCy4GPsq9hZH6D38E?p=preview Comparing those files, I saw that my compiled files looks much more complicated:

"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;

So I tried diferent tsconfig.json properties to get a working transpiler, but it seem to be something with the transpiler itself (I used for both variants the typescript@2.1.6 version)

I already tried with model in tsconfig.json beeing: amd, umd, system, commonjs, es2015 but this didn't solve the problem. Also I tried with noEmeritHelpers, but the problem was still there (I think that I once read a problem with var core_1 = require("@angular/core"); not beeing defined, but this didn't help me).

I want to transpile all .ts-files from my app folder, combine them in one and then minify it. The best way to do it would by with gulp, since this would be easy to combine with my maven project.

解决方案

use Angular CLI

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

edit the angular-cli.json config file

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

then you could run ng build --prod --watch or ng build --watch

then build your maven app, it'll contain all build file: js, css, assets, etc

这篇关于用于Angular2的TypeScript JavaScript转换器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！