如何将angular 2 app.module转换为es6

时间:2017-09-29 10:18:13

标签: javascript angular typescript ecmascript-6 es6-modules

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//purposefully removed some imports

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AddonsModule,
    PageBodyModule,
    NgbModule.forRoot(),
    OwlModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    }),
    NouisliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如何将这种在TypeScript中编写Angular 2的代码转换为ES6?我只想转换这个@NgModule({...})" app.module.ts"部分进入ES6。因为我有一个Angular 2项目,我需要将其转换为ES6。到目前为止,我只是想出了这个问题。

1 个答案:

答案 0 :(得分:1)

tsconfig.json中,将module值从当前的任何值更改为es6。当TypeScript转换TS文件时,它将在ES6中完成。

如果您需要删除TypeScript支持并依赖纯JavaScript,则可以使用已编译的代码进行进一步的工作。

更新

如果要生成ES6代码,则需要设置target,而不是modulemodule处理加载程序。您可以重用和更新的转换代码示例如下:

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;
};
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRouteModule } from './app.router';
import { AppComponent } from './app.component';
import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
let AppModule = class AppModule {
};
AppModule = __decorate([
    NgModule({
        declarations: [
            AppComponent,
            Tab1Component,
            Tab2Component
    ],
    imports: [
        BrowserModule,
        RouterModule,
        AppRouteModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
], AppModule);
export { AppModule };
//# sourceMappingURL=app.module.js.map

tsconfig.jsontarget: "es2015"中,您还可以将module设置为相同的值。