Babel转换es7类装饰器意外的令牌错误

时间:2016-06-30 15:51:17

标签: ecmascript-6 aurelia babel ecmascript-7 transpiler

我在使用es6和es7代码的Aurelia应用程序上工作,我试图使用babel来转换代码。我的packages.json文件中有以下内容

"scripts": {
    "babel": "babel --stage 1 -d AureliaWeb/ ../Test/Aurelia/ --extends babelrc",

我安装了以下软件包:

"devDependencies": {
"babel-core": "^6.10.4",
"babel-plugin-syntax-decorators": "^6.8.0",
"babel-plugin-syntax-flow": "^6.8.0",
"babel-plugin-transform-es2015-modules-amd": "^6.8.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-plugin-transform-es2015-modules-systemjs": "^6.9.0",
"babel-plugin-transform-flow-strip-types": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"babel-preset-stage-3": "^6.11.0",
"babel-register": "^6.9.0",
"chai": "^3.5.0"
},
"dependencies": {
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015-loose": "^7.0.0",
"core-js": "^2.4.0",
"lodash": "^4.13.1"
}

我试图将es7代码转换为:

import {inject, noView} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@noView() <-- THIS IS CAUSING THE ERROR!!
@inject(HttpClient)
export class CompanyDataManager {

我得到错误语法错误意外令牌导致类装饰器@noView。我已经检查了第1阶段的预设,我知道已经删除了类装饰器http://babeljs.io/docs/plugins/preset-stage-1/

由于这个原因,我在遗留装饰器中添加了“babel-plugin-transform-decorators-legacy”,这里有{&#39; https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

所以我的.babelrc(位于我项目的根目录)看起来像这样:

{
  "presets": [ "es2015-loose", "stage-1" ],
  "plugins": [
    "syntax-decorators",
    "syntax-flow",
    "babel-plugin-transform-decorators-legacy",
    "transform-class-properties",
    "transform-flow-strip-types"
  ]
}   

然而我仍然没有找到快乐!问题是

  1. 当我在npm执行babel脚本时,如何确认我的babelrc文件被拾取?我尝试添加--extends babelrc以试图强制它,但我不确定这是否正确。
  2. 我也试过在babel命令中指定一个插件,如下所示:

    &#34; babel --plugins babel-plugin-transform-decorators-legacy --stage 1 -d AureliaWeb / ../ Test / Aurelia /&#34;

  3. 仍然没有运气,任何帮助将不胜感激。

    更新1

    在搞乱.bablerc文件后,我想我可能把它放在了错误的位置。我的结构如下(它是一个mvc应用程序)。

    • Test.UnitTest(Project)&lt; - 我从这里运行babel脚本
      • AureliaWeb&lt; - end trandpiled location
    • 测试(项目)
      • Aurelia&lt; - 包含实际的Aurelia代码

    将.bablerc文件移动到Test&gt;之后Aurelia我开始收到以下错误

    未知插件&#34; transform-decorators-legacy&#34;在&#34; C:\ Code \ src \ Test \ Aurelia \ .babelrc&#34;中指定在0,试图解决相对于&#34; C:\ Code \ src \ Test \ Aurelia&#34;

    我已经尝试在两个项目中为transform-decorators-legacy安装包,看看它是否有任何区别

    更新2

    我现在可以确认这实际上是问题,看来babel文件需要放在源文件夹中,而不是目的地或者执行babel的位置。

2 个答案:

答案 0 :(得分:2)

我相信你只需要删除括号:

@noView
@inject(HttpClient)
export class CompanyDataManager {

例如,请参阅point 2 under "Best Effort"

class Example {
    @dec
    static prop = i++;
}

______

注意:当您在.babelrc(或package.json)中声明一个babel插件时,您可以删除前缀babel-plugin-

[
  "syntax-decorators",
  "syntax-flow",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types"
]

______

  

如何确认在执行babel脚本时我的babelrc文件被拾取

Babel查找为.babelrcpackage.json "babel"属性调用它的目录。只要您拥有其中任何一个并且在同一目录中执行Babel,Babel就会找到它。

答案 1 :(得分:0)

我已经回答了我自己的问题,详细信息在主帖中。

babel文件需要放在源文件夹中,而不是目的地或者执行babel的位置。