Question

我一直在关注角度2打字稿demo。我现在想使用gulp使用我自己的构建管道。但是，在尝试使用我的编译gulp任务时，我收到了打字稿编译错误。这是我的项目结构

- project
  |- app
    |- app.component.ts
    |- main.ts
  |- node-modules
  |- typings
  gulpfile.js
  tsconfig.json
  package.json

这是我的gulpfile

var gulp = require('gulp');
var ts = require('gulp-typescript');

gulp.task('compile-app', function() {
    return gulp
        .src('./app/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(gulp.dest('./bin'));
});

当我尝试运行＆＃39; gulp compile-app＆＃39;我收到以下错误

project/node_modules/@angular/core/src/application_ref.d.ts(39,88): error TS2304: Cannot find name 'Promise'.
project/node_modules/@angular/core/src/di/reflective_provider.d.ts(105,123): error TS2304: Cannot find name 'Map'.
project/node_modules/@angular/core/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.
etc......

我无法弄清楚发生了什么。有什么想法吗？

节点v6.2.1 npm v3.9.3 打字1.0.5

Answer 1

从您的gulp错误看，您似乎缺少ES6功能。如果您将.tsconfig目标属性更改为＆＃34; es6＆＃34;它会编译，因为Promise和Map有ES6定义。这种方法的问题是ES6仍然与大多数浏览器不兼容。为了使用这些和目标ES5，您需要es6-shim。

使用Typings~1.0及以上，您需要使用：

typings install dt~es6-shim --save --global

Answer 2

我可以通过添加

来删除构建编译错误

///<reference path="../typings/index.d.ts/"/>

到应用程序的主要入口点，在本例中为main.ts，即我引导应用程序的位置。这将为打字稿提供对打字所安装的core-js打字稿定义的正确引用，即

/// <reference path="globals/core-js/index.d.ts" />

因此es6的垫片定义与es5浏览器一起使用。

注意：您无需使用最新版本的angular（2.0.0-rc.2）安装es6-shim。使用core-js。如果您添加es6-shim和core-js，则在打字稿编译期间会收到duplicate identifier错误消息。

Angular 2 Gulp Typescript编译

2 个答案: