Comment utiliser les outils plug-in pour convertir le code ES6 en ES5-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-10 14:08:58

original

3124 Les gens l'ont consulté

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": [
    ]
}

Copier après la connexion

./ 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>

Copier après la connexion

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

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

Copier après la connexion

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!