Comment puis-je obtenir Babel 6 à compiler ES5 javascript?

J'ai installé la dernière version de babel. Actuellement 6.4.0. J'ai créer 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 la création de ma classe, je fais ce qui suit dans la ligne de commande. 

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

Je m'attends à ce que mon app.js fichier es5 compilé en javascript mais il a exactement le même code que le myclass.js fichier. Ce qui me manque, qui peut être la cause?

InformationsquelleAutor mattwallace | 2016-01-12
  1. 67

    Vous ne dites pas à Babel pour cible ES5, vous choisissez le nécessaire presets/plugins que le faire pour vous. Par exemple, si vous utilisez le es2015 prédéfinie, ce sera de compiler ES6 code de ES5 du code compatible. Vous ne spécifiez pas une "cible".

    Le guide ci-dessous vous guidera à l'aide de Babel à transformer ES6 code dans code peut s'exécuter dans un environnement qui prend en charge ES <= 5.

    0. Une note sur les changements de l'API de Babel 5

    Dans le documentation de Babel 6:

    Le package babel n'est plus. Auparavant, c'était l'ensemble du compilateur et de toutes les transformations, plus un tas d'outils CLI, mais cela a conduit à de trop grandes téléchargements et était un peu confus. Maintenant, nous l'avons divisé en deux ensembles séparés: babel-cli et babel-core.

    Et:

    Babel 6 navires sans aucun défaut transforme, ainsi, lorsque vous exécutez Babel sur un fichier, il vous suffit d'imprimer et d'en ressortir sans rien changer.

    ______

    1. Installer babel-cli

    Tout d'abord, comme dans les docs, vous devez installer babel-cli:

    $ npm install babel-cli

    ______

    2. Définir les paramètres par défaut dans .babelrc

    Deuxièmement, vous devez utiliser un .babelrc (docs) locale de vos fichiers et de définir de façon explicite les presets que vous souhaitez Babel à utiliser. Par exemple, pour ES6+ dispose d'utiliser le env preset.

    ...une smart preset qui vous permet d'utiliser la dernière JavaScript sans avoir besoin de s'immiscer dans laquelle la syntaxe transforme (et, éventuellement, navigateur polyfills) sont nécessaires à votre environnement cible(s).

    L'installer:

    npm install @babel/preset-env

    Puis de le déclarer dans votre .babelrc:

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

    Remarque: si vous utilisez Babel 7.x vous pouvez utiliser un "projet à l'échelle de configuration" (babel.config.js) (docs) qui "s'applique largement, même si les plugins et les presets d'appliquer facilement à des fichiers dans node_modules ou dans un lien symbolique paquets".

    ______

    3. Exécuter babel

    Maintenant en cours d'exécution de la babel de commande comme dans votre exemple devrait fonctionner:

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

    Vous pouvez également utiliser un système de regroupement comme webpack, cumulatif, ou browserify, avec leurs babel plugin.

    • Même si cette réponse a des infos utiles, il n'a pas répondu à la question: il n'explique pas comment le compiler à l'ES5.
    • De quelle manière?
    • Je corrige la position des mains. Apparemment, le es2015 preset est de savoir comment vous obtenez Babel pour produire de l'es5 de sortie compatibles. J'ai répondu alors que j'étais en essayant de se faire. Est-ce juste moi ou est-ce que le nommage de la confusion. ES2015 = ES6 ils ont donc créé un preset pour cible ES5 pourquoi l'appeler "ES2015"?
    • Les presets sont ceux qui définissent la disposition des fonctionnalités de la langue, de sorte que ces sont ce que les noms font allusion. (Comment voulez-vous/Babel, à savoir l'application utilise ES6 si il dit preset: ES5?) Donc es2015 signifie que vous pouvez utiliser ES6 et ils seront transpiled.
    • Clairement j'ai besoin de faire plus de lecture sur le sujet. Je voudrais donc utiliser l'ES6 preset si mon code utilise ES6 des fonctions, et ensuite utiliser un plugin pour cible ES5? Est-ce qu'Babel sait ce que la compatibilité j'ai besoin?
    • Pas besoin de définir un ciblage ES5; le préréglage est en fait une liste de plugins à utiliser, et ces cibles de l'ES5 environnement automatiquement. 🙂
    • Pourquoi ce n'est pas accepté comme réponse ? Il a été de plus en plus clair que la documentation. Docs n'a jamais mentionné la .babelrc et pas de présélection. Ici, babeljs.io/docs/utilisation/cli +1.
    • Ma conjecture est que babel ne sait pas ce qui peut construire que vous utilisez dans votre code à l'avance, donc ne prend pas en charge la définition d'une cible comme ES5 ou ES3 (texte tapé à la machine prend en charge que BTW). C'est toi qui doit savoir ce qui les constructions que vous avez utilisé dans votre projet, puis sélectionner le preset en conséquence. De cette façon, babel sera transpile il, à l'ES5 que c'est la cible implicite.
    • Je vous remercie beaucoup . Pour compililng un fichier à l'aide de babel, --hors-la directive de fichier et pour compilling un répertoire, -d doit être utilisé.
    • Est-ce la réponse ne fonctionne pas pour vous? Pouvez-vous expliquer ce que vous avez fait et pourquoi c'est pas suffisant s'il vous plaît.
    • acceptez - la documentation est prolifique, mais toujours très déroutant car il n'a pas d'expliquer les concepts de base.

    InformationsquelleAutor sdgluck