Babel transpiling es7 classe décorateurs Erreur de jeton inattendue

Question

im travaillant sur une application Aurelia qui a utilisé le code es6 et es7, im essayant de transpiler le code en utilisant babel. Je suit dans mon fichier packages.json

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

Je les paquetages suivants:

"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" 
} 

Im essayant de transpile le code ES7 ressemblant à:

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

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

Im obtenir la error Erreur de syntaxe Le jeton inattendu est le décorateur de classe @noView. J'ai vérifié l'étape 1 présélection et je sais que les décorateurs de classe ont été enlevés http://babeljs.io/docs/plugins/preset-stage-1/

En raison de cela, je l'ai ajouté dans le décorateur héritage « babel-plugin-transformer-décorateurs-legacy trouvé ici » https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

si mon .babelrc (qui est situé à la racine de mon projet) ressemble à ceci:

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

Cependant im trouver toujours pas de joie! La question est

1. Comment puis-je confirmer que mon fichier babelrc est en train d'être récupéré lors de l'exécution du script babel dans npm? J'ai essayé d'ajouter --extends babelrc dans une tentative de le forcer, mais je ne sais pas si c'est correct.

2. J'ai également essayé spécifier un plug-in dans la commande babel comme ceci:

   « babel --plugins babel-plugin-transform-décorateurs-legacy --stage 1 -d AureliaWeb/../Test/Aurelia/"

Toujours pas de chance, toute aide serait grandement appréciée.

Update 1

Après déconner avec le fichier .bablerc, je pense que je pourrais avoir placé au mauvais endroit. Ma structure est la suivante (c'est une application mvc).

• Test.UnitTest (Projet) < - Je suis exécute le script babel d'ici
  • AureliaWeb < - end emplacement trandpiled
• Test (Projet)
  • Aurelia < - contient le code Aurelia réel

Après avoir déplacé le fichier .bablerc dans Test> Aurelia j'ai commencé à obtenir l'erreur suivante

plug-in Unknown "transform-décorateurs-legacy" spécifié dans « C: \ code \ src \ Test \ Aurelia \ .babelrc » à 0, a tenté de résoudre par rapport à « C: \ code \ src \ Test \ Aurelia »

J'ai essayé d'installer le paquet pour-legacy transformer décorateurs dans les deux projets pour voir si cela fait une différence

mise à jour 2

Je peux maintenant confirmer que cela était en fait la question, il semble que le fichier babel doit être placé dans le dossier source, pas la destination ou l'emplacement à partir de laquelle babel a été exécuté.

Answer 1

J'ai répondu à ma propre question, les détails sont dans le message principal.

Le fichier babel doit être placé dans le dossier source, et non dans la destination ou l'emplacement à partir duquel babel a été exécuté.

Answer 2

Je crois que vous avez juste besoin d'enlever les parenthèses:

@noView 
@inject(HttpClient) 
export class CompanyDataManager { 

Voir, par exemple, point 2 under "Best Effort":

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

______

Remarque: lorsque vous déclarez un plugin babel dans votre .babelrc (ou package.json) vous pouvez déposer le préfixe babel-plugin-:

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

______

Comment puis-je confirmer que mon fichier babelrc est pris quand je suis l'exécution du script babel

Babel regarde dans le répertoire dans lequel il a été invoqué soit pour un .babelrc ou package.json avec "babel" propriété. Tant que vous avez l'un ou l'autre et que vous exécutez Babel dans le même répertoire, Babel le trouvera.