Gulp在导入名称空间时自动更改系统寄存器名称

时间:2016-11-28 15:11:48

标签: angular typescript gulp tsconfig

我有以下层次结构:

enter image description here

constants.ts

export namespace Constants {
    export const root = "dist/";
}

app.components.ts

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "dist/views/app.component.html",
})
export class AppComponent {
    public name = "Test !";
    public lastName = "App !";
}

app.module.ts

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent }  from "./components/app.component";

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app.module";

platformBrowserDynamic().bootstrapModule(AppModule);

gulpfile.js

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
gulp.task('build:ts', () => {
    log('Compiling TypeScript --> JavaScript');
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest(config.jsDist));
});

tsconfig.json

{
  "include": [
    "./App/TypeScript/**/main.ts"
  ],
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es6",
    "declaration": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "out": "main.min.js"
  },
  "sortOutput": true,
   "exclude": [
    "node_modules",
    "typings/index",
    "typings/index.d.ts"
  ]
}

当我运行 build:ts 时,在生成的输出脚本上,我得到这样的结果:

System.register("main", ["@angular/platform-browser-dynamic", "app.module"],
function(exports_3, context_3) {..});

但是只有在没有导入任何模块/命名空间时才能得到它。

如果我将 app.components.ts 更改为

import { Component } from "@angular/core";

//This is the change:
import { Constants } from "../../common/constants/constants";

@Component({
    selector: "my-app",
    templateUrl: "dist/views/app.component.html",
})
export class AppComponent {
    public name = "Test !";
    public lastName = "App !";
}

我会得到这个输出:

System.register("ui/main", ["@angular/platform-browser-dynamic", 
"ui/app.module"], function(exports_4, context_4) { ... });

所以我的问题是:

  1. 如何生成名称?

  2. 为什么有进口时它会改变?

0 个答案:

没有答案