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等中使用getter / setter。

Angular2广泛使用它们，因为它是用Typescript编写的。尽管如此，装饰者只能处于可能包含在proposal中的“future ES7 specification”阶段。

来源：

Exploring Decorators - Medium

相关：

How Can I Use Decorators Today

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

1 个答案: