Angular2 ES6/ES2015 Babel - Angular 2 @ 符号的语法错误

Question

Babel CLI 在终端中运行时给我这个错误：

> Benjamins-MacBook-Pro:public Ben$ npm run build
    > 
    > > angular2-quickstart@1.0.0 build /Users/Ben/Development/whatwegrowangular2/public
    > > babel boot.js -d lib
    > 
    > SyntaxError: boot.js: Unexpected token (5:0)   3 |    4 | //
    > Annotation section
    > > 5 | @Component({
    >     | ^   6 |   selector: 'my-app',   7 |   template: '<h1>Hello {{ name }}</h1>'   8 | })

我正在使用 ES6/ES2015 和 Angular 2.

Visual studio代码是我的开发环境

对这个问题有什么想法吗？错误出现在组件之前的“@”符号上。

Package.json 文件:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server",
    "build": "babel boot.js -d lib"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "babel-cli": "^6.3.17",
    "lite-server": "^1.3.1"
  }
}

Answer 1

您需要启用 ES7 装饰器支持

支持 @Class 装饰器（即你的错误原因）可以启用选项标志。

$ babel --optional es7.decorators

装饰器在 Typescript 中被广泛使用，以允许该语言模仿传统静态类型 OOP 语言的特征。 @Class 装饰器充当高阶工厂函数，@Property 装饰器允许在 JS 等中使用 getters/setters

Angular2 广泛使用它们，因为它是用 Typescript 编写的。尽管如此，装饰器只在 'proposal' stage of possibly being included in the future ES7 specification.

来源：

Exploring Decorators - Medium

相关：

Angular2 ES6/ES2015 Babel - Angular 2 @ 符号的语法错误

Angular2 ES6/ES2015 Babel - Syntax error with Angular 2 @ symbol

ecmascript-6

babeljs

angular