在定位es5

时间:2016-10-04 15:10:52

标签: angular typescript npm gulp gulp-typescript

我已经启动了我的第一个Angular2应用程序,而且我无法使用gulp来编译es5。

以下是依赖项文件:

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.18",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "gulp": "^3.9.1",
    "gulp-htmlmin": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "jquery": "^2.2.0",
    "moment": "^2.14.1",
    "ng2-accordion": "0.0.9",
    "ng2-bootstrap": "^1.1.5",
    "reflect-metadata": "^0.1.3",
    "responsive-directives-angular2": "^0.4.2",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.17"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.41",
    "browser-sync": "^2.16.0",
    "canonical-path": "0.0.2",
    "chai": "^3.5.0",
    "concurrently": "^2.2.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-htmlmin": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^6.1.1",
    "gulp-typescript": "^2.14.0",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.2.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "karma-mocha": "^1.1.1",
    "lite-server": "^2.2.2",
    "lodash": "^4.11.1",
    "mocha": "^3.0.2",
    "node-sass": "^3.10.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^4.0.2",
    "tslint": "^3.7.4",
    "typescript": "^2.0.3",
    "typings": "^1.3.2",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }

我有以下tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "outDir": "dist/app",
    "target": "es5",
    "mapRoot": "./",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ],
  "filesGlob": [
    "./**/*.ts",
    "!./node_modules"
  ]
}

如果我使用tsc命令编译应用程序,一切似乎都很完美。我可以在dist / app上找到我的应用文件。

我想使用gulp自动化很多东西,所以我有以下gulp文件:

var gulp = require('gulp');
const typescript = require('gulp-typescript');
var tsProject = typescript.createProject('tsconfig.json');
const sourcemaps = require('gulp-sourcemaps');

// TypeScript compile
gulp.task('compile', function () {
  return gulp
    .src(['./app/**/*.ts'])
        .pipe(sourcemaps.init())
    .pipe(typescript(tsProject))
        .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/app'));
});

当我运行gulp compile时,我遇到了很多错误:

/home/user/workspace/projects/node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Promise'
/home/user/workspace/projects/node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Set'
/home/user/workspace/projects/node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Map'

在定位ES5时,gulp-typescript似乎无法使用ES6语法。

如果我在tsconfig.json中将目标更改为es6,一切正常。 但是我当然需要一个适用于相对较旧的浏览器的输出。

我发现了很多我尝试过的建议,比如在主要ts文件中添加一些引用,但没有任何效果。

1 个答案:

答案 0 :(得分:0)

这是gulp-typescript版本的一个问题,它是:

"gulp-typescript": "^2.14.0",

我不知道这个软件包是如何工作的,但它看起来并没有使用当前安装的打字稿软件包,而是它自己的版本。

当我升级版本时,一切正常。

"gulp-typescript": "^3.0.2",