web-dev-qa-db-fra.com

Comment compiler Babel 6 en javascript ES5?

J'ai installé la dernière version de babel. Actuellement 6.4.0. Je crée un fichier appelé myclass.js qui a le code suivant.

class MyClass {
    constructor(name) {
        console.log("I am a MyClass object .. ", name);
    }
}

var myclass = new MyClass('1234');

après avoir créé ma classe, je fais ce qui suit dans la ligne de commande.

$> babel ./src/myclass.js --out-file ./out/app.js

Je m'attendrais à ce que mon fichier app.js ait le code JavaScript compilé es5, mais il contient exactement le même code que le fichier myclass.js. Qu'est-ce qui me manque peut-être?

ecmascript-6babeljs
55
mattwallace

Vous ne dites pas à Babel de cibler ES5, vous choisissez les préréglages/plugins nécessaires pour le faire à votre place. Par exemple, si vous utilisez le es2015 preset, cela compilera le code ES6 en code compatible ES5. Vous ne spécifiez pas une "cible".

Le guide ci-dessous vous expliquera comment utiliser Babel pour transformer le code ES6 en code pouvant être exécuté dans un environnement prenant en charge ES <= 5.

0. Remarque sur les modifications apportées aux API par rapport à Babel 5

Dans le documentation pour Babel 6 :

Le paquet babel n'est plus. Auparavant, il s'agissait de l'ensemble du compilateur et de toutes les transformations, ainsi que de nombreux outils de l'interface de ligne de commande, mais cela entraînait des téléchargements inutilement volumineux et était un peu déroutant. Nous l’avons maintenant divisée en deux packages distincts: babel-cli et babel-core.

Et:

Babel 6 est livré sans aucune transformation par défaut. Par conséquent, lorsque vous exécutez Babel sur un fichier, il vous le réimprimera sans rien changer.

______

1. Installez babel-cli

Tout d’abord, comme dans la documentation, vous devez installer babel-cli:

$ npm install babel-cli

______

2. Définissez les préréglages dans .babelrc

Deuxièmement, vous devez utiliser un .babelrc ( docs ) dans vos fichiers et définissez explicitement le préréglage que vous souhaitez que Babel utilise. Par exemple, pour les fonctions ES6 +, utilisez env preset .

... un préréglage intelligent qui vous permet d'utiliser le code JavaScript le plus récent sans avoir besoin de microgérer la transformation de syntaxe (et éventuellement les remplissages de navigateur) nécessaires à votre ou vos environnement (s) cible (s).

Installez-le:

npm install @babel/preset-env

Et puis déclarez-le dans votre .babelrc:

{
  "presets": ["@babel/preset-env"]
}

Remarque: Si vous utilisez Babel 7.x, vous préférerez peut-être utiliser une "configuration à l'échelle du projet" (babel.config.js) ( docs ) qui "s’applique de manière large, permettant même aux plug-ins et aux presets de s’appliquer facilement à des fichiers de noeuds_modules ou de packages à liens symboliques".

______

3. Exécutez babel

Maintenant, lancer la commande babel comme dans votre exemple devrait fonctionner:

$> babel ./src/myclass.js --out-file ./out/app.js

Vous pouvez également utiliser un bundle tel que webpack , rollup , ou browserify , avec leur plugin babel respectif.

67
sdgluck