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制定者等

Angular2廣泛使用它們，因為它是用Typescript編寫的。 盡管如此，裝飾器僅處於“ 提議 ”階段，可能會包含在將來的ES7規范中 。

資源：

• 探索裝飾器-中

有關：

• 我今天如何使用裝飾器