Maison > Article > interface Web > Comment utiliser les outils plug-in pour convertir le code ES6 en ES5

Comment utiliser les outils plug-in pour convertir le code ES6 en ES5

php中世界最好的语言original: 2018-03-10 14:08:583059parcourir

Cette fois, je vais vous montrer comment utiliser les outils de plug-in pour convertir le code ES6 en ES5. Quelles sont les précautions concernant l'utilisation des outils de plug-in pour convertir le code ES6 en ES5. cas pratique. Jetons un coup d'oeil.

Il existe de nombreux outils pour convertir ES6 en ES5. Vous trouverez ci-dessous l'introduction de babel pour convertir le code ES6

Dans l'environnement npm : cd vers le répertoire du projet ; init -y

npm install babel-cli -g (installez babel-cli globalement en premier);

npm install babel-cli babel-preset-es2015 --save-dev (installez ces deux localement);

Répertoire du projet :

Comment utiliser les outils plug-in pour convertir le code ES6 en ES5 Le contenu du fichier .babelrc est :

{
    "presets": [
        "es2015"
    ],
    "plugins": [
    ]
}

./ src/index.js Le contenu est ;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转化test</title>
    <script src="dist/index.js"></script>
</head>
<body>
    <h3>hello ECMA SCRIPT 6</h3>
</body>
</html>

Voyons la syntaxe d'es6 ; testez-la simplement ;

let name = "liuliu";
console.log(name);

Enfin : babel src/index.js -o dist/index.js (n'omettez pas o, sinon le résultat sera Il sera affiché directement dans le terminal et aucun fichier ne sera généré)

Vous pouvez voir le résultat converti de .dist/index.js;

Vous verrez également la sortie de la variable

après l'ouverture du navigateur

;

Généralement, lorsque vous utilisez des outils de composants tels que webpack, toutes les dépendances auront babel ; n'utilisez pas d'outils de composants automatiques pour les tests quotidiens ou une référence unique au projet ;

Je crois l'avoir lu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture connexe :

entrée, sortie, analyse de module de webpack3.x

Méthode de commutation d'onglet Vue2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction et export des spécifications commonJS et es6Article suivant：Introduction et export des spécifications commonJS et es6

Articles Liés

Voir plus