Comment utiliser Babel pour convertir ES6 en ES5 dans Webstorm

Cette fois, je vais vous montrer comment utiliser Babel dans Webstorm pour convertir ES6 en ES5, et quelles sont les précautions pour utiliser Babel dans Webstorm pour convertir ES6 en ES5. Voici les cas pratiques, revenons. jetez un oeil Jetez un oeil.

Avant-propos : ECMAScript 6 est le standard de nouvelle génération du langage JavaScript, officiellement publié en juin 2015. Mozilla lancera JavaScript basé sur ce standard 2.0. L'objectif d'ES6 est de permettre au langage JavaScript d'être utilisé pour écrire des applications volumineuses et complexes et de devenir un langage de développement au niveau de l'entreprise. Cependant, les navigateurs modernes ne prennent pas en charge les nouvelles fonctionnalités d'ES6, donc si vous souhaitez utiliser les nouvelles fonctionnalités d'ES6 directement dans le navigateur, vous devez utiliser d'autres outils.

Aujourd'hui, je vais partager comment configurer Webstorm pour utiliser Babel pour transcoder automatiquement ES6 en ES5. Babel est un transcodeur largement utilisé. Babel peut parfaitement convertir le code ES6 en code ES5, afin que nous puissions utiliser les fonctionnalités ES6 dans nos projets sans attendre la prise en charge du navigateur.

1. Créez un nouveau projet vide dans Webstorm et nommez-le es6demo.

2. Créez ensuite un nouveau package.json sous le répertoire racine, et n'avez qu'à spécifier deux attributs à savoir le nom et la version.

3. Ouvrez le terminal webstorm (Terminal), la touche de raccourci est Alt+F12, Installer babel-cli. Il peut également être installé à l’échelle mondiale.

Installer babel-cli : npm install --save-dev babel-cli

4. Après avoir installé babel-cli, vous pouvez voir qu'un fichier node_modules et un fichier package-lock.json sont nouvellement générés. En même temps, on constate qu'il y a un

Une telle ligne de code indique que babel-cli a été installé avec succès et est devenu une dépendance.

"devDependencies": {
"babel-cli": "^6.26.0"
}

5. Sélectionnez ensuite l'option Javascript dans Paramètres->Langues et frameworks, et sélectionnez la version comme ECMAScript6.

6. Dans le terminal webstorm, installez le préréglage de Babel pour identifier correctement le code ES6. La commande est la suivante :

. Après l'installation, il y aura plus de

npm install --save-dev babel-preset-es2015

dans le fichier package.json. "babel-preset-es2015": "^6.24.1" Cette ligne de code indique que babel-preset-es2015 a été installé avec succès.

7. Créez un nouveau fichier nommé .babelrc sous le répertoire racine avec le contenu suivant :

8. Configurez File Watcher. Fichier--paramètres--Outils--File Watcher.

{
 "presets": [
  "es2015"
 ]
}

9. Créez un fichier appelé test.js et écrivez-y la syntaxe es6 afin qu'aucune erreur ne soit signalée. test-compiled.js est un fichier compilé dans es5 et la valeur par défaut est le mode strict.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment ajouter une barre de progression aux images téléchargées dans axios

Comment optimiser les données JSON regroupement de JS

JS exploite le texte TXT pour insérer du contenu à la position spécifiée

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!