ecmascript-6 - Babel 转译 es7 类装饰器出现意外的标记错误

Question

我正在开发一个使用 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 在这里找到”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 命令中指定一个插件，如下所示:

   “babel --plugins babel-plugin-transform-decorators-legacy --stage 1 -d AureliaWeb/../Test/Aurelia/”

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

更新1

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

• Test.UnitTest (项目) <-- 我从这里运行 babel 脚本
  • AureliaWeb <-- 结束转发位置
• 测试(项目)
  • Aurelia <-- 包含实际的 Aurelia 代码

将 .bablerc 文件移至 Test > Aurelia 后，我开始收到以下错误

在“C:\Code\src\Test\Aurelia\.babelrc”0处指定的未知插件“transform-decorators-legacy”，尝试相对于“C:\Code\src\Test\Aurelia”进行解析

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

更新2

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

Answer 1

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

@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"
]

______

How can i confirm that my babelrc file is being picked up when im executing the babel script

Babel 在调用它的目录中查找带有 "babel" 属性的 .babelrc 或 package.json 。只要你有其中任何一个并且在同一目录中执行 Babel，Babel 就会找到它。