如何配置项目是为es6表示法编译的

时间:2017-10-03 10:20:15

标签: typescript npm es6-promise

我在Angular 2 + PrimeNG上开发项目。开始使用Git,这是在TypeScript编译中出现的问题。马上就会破坏你的package.json。

"dependencies": {
 "@angular/common": "2.4.2",
 "@angular/compiler": "2.4.2",
 "@angular/core": "2.4.2",
 "@angular/forms": "2.4.2",
 "@angular/http": "2.4.2",
 "@angular/platform-browser": "2.4.2",
 "@angular/platform-browser-dynamic": "2.4.2",
 "@angular/router": "3.4.2",
 "ag-grid": "12.0.0",
 "ag-grid-angular": "12.0.0",
 "angular2-focus": "^1.1.0",
 "core-js": "^2.4.1",
 "font-awesome": "^4.6.3",
 "moment": "^2.18.1",
"primeng": "^2.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.1",
"tedious": "1.14.0",
"zone.js": "^0.7.2"
},
"devDependencies": {
 "@angularclass/hmr": "^1.0.1",
 "@angularclass/hmr-loader": "^3.0.2",
 "@types/core-js": "^0.9.0",
 "@types/jasmine": "2.5.41",
 "@types/lodash": "4.14.50",
 "@types/node": "^6.0.38",
 "@types/selenium-webdriver": "2.53.33",
 "angular2-template-loader": "^0.6.0",
 "autoprefixer": "^6.3.2",
 "awesome-typescript-loader": "^3.0.0-beta.17",
 "codelyzer": "2.0.0-beta.4",
 "copy-webpack-plugin": "^4.0.0",
 "css-loader": "^0.26.1",
 "extract-text-webpack-plugin": "^2.0.0-beta.4",
 "file-loader": "^0.9.0",
 "html-loader": "^0.4.0",
 "html-webpack-plugin": "^2.8.1",
 "istanbul-instrumenter-loader": "^0.2.0",
 "jasmine-core": "^2.3.4",
 "jasmine-spec-reporter": "^2.4.0",
 "json-loader": "^0.5.3",
 "karma": "1.3.0",
 "karma-chrome-launcher": "^2.0.0",
 "karma-coverage": "^1.0.0",
 "karma-jasmine": "^1.0.2",
 "karma-mocha-reporter": "^2.0.3",
 "karma-remap-istanbul": "0.2.1",
 "karma-sourcemap-loader": "^0.3.7",
 "karma-webpack": "1.8.0",
 "node-sass": "^3.4.2",
 "null-loader": "0.1.1",
 "postcss-loader": "^1.1.0",
 "protractor": "^4.0.10",
 "raw-loader": "0.5.1",
 "remap-istanbul": "^0.6.4",
 "rimraf": "^2.5.1",
 "sass-loader": "^4.0.0",
 "shelljs": "^0.7.0",
 "style-loader": "^0.13.0",
 "ts-helpers": "^1.1.1",
 "tslint": "^4.3.1",
 "tslint-loader": "^3.3.0",
 "typedoc": "^0.5.1",
 "typescript": "2.0.10",
 "url-loader": "^0.5.6",
 "webpack": "2.1.0-beta.25",
 "webpack-dev-server": "2.1.0-beta.9"
}
}

从安装所有npm包的项目克隆repo后,构建项目,获取一组此类错误(这里是编译日志的一个片段)。

ERROR in [at-loader] ./node_modules/@angular/router/src/utils  /collection.d.ts:35:58
TS2304: Cannot find name 'Promise'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:47:36
TS2304: Cannot find name 'Iterable'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:353:48
TS2304: Cannot find name 'PropertyKey'.

情况众所周知 - 没有看到es5的类型。文件tsconfig.json是这样的:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"compileOnSave": false,
"buildOnSave": false,
"awesomeTypescriptLoaderOptions": {
  "forkChecker": true,
  "useWebpackText": true
 }
}

开始在es6模式下翻译编译器TS以解决问题," target":" es6"。错误日志是:

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:22:77
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type   argument(s).

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:24:34
TS2368: Type parameter name cannot be 'any'

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:24:79
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s).

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:96:15
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s).

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:99:42
TS2368: Type parameter name cannot be 'any'

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:104:22
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s).

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:115:34
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s).

我觉得项目原则上不了解es6的类型。如何正确配置es6下的编译项目?

1 个答案:

答案 0 :(得分:0)

你必须使用&#34; es5&#34;作为TypeScript编译器&#34; target&#34;对于目前的角项目,it's a baseline requirement, es6 is not wildly supported

但像&#34;承诺&#34;等功能&安培; &#34; DOM.Iterable&#34; ES5不支持,因此您必须添加其他编译选项以加载这些库。解决方案是将"lib": ["es2015", "dom"]添加到&#34; tsconfig.json&#34;:

{
"compilerOptions": {
"target": "es5",
"lib": ["es2015", "dom"],
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"compileOnSave": false,
"buildOnSave": false,
"awesomeTypescriptLoaderOptions": {
  "forkChecker": true,
  "useWebpackText": true
 }
}

此选项在&#34; Angular 2 guide - TypeScript Configuration&#34;

中提及
  

基于--target,TypeScript添加了额外的环境声明   如果目标是es6,则为Promise。

     

由于QuickStart的目标是es5,因此您可以覆盖列表   要包含的声明文件:

     
    

&#34; lib&#34;:[&#34; es2015&#34;,&#34; dom&#34;]

  
     

多亏了这一点,即使以es5为目标,你也拥有所有es6类型。