Comment utiliser Babel dans WebStorm ES6

Cette fois, je vais vous montrer comment utiliser babel dans WebStorm ES6. Quelles sont les précautions pour utiliser babel dans WebStorm ES6. Voici des cas pratiques, jetons un coup d'œil.

1. Paramètres de prise en charge de la grammaire

Préférences > Langages & Frameworks > JavaScript

2. BabelInstallation

1. Installation globale

 npm install -g babel-cli

2. Le projet actuel est adapté à l'utilisation de différentes versions de Babel

 npm install --save-dev babel-cli

3. Utilisation de base de Babel

# 转码结果输出到标准输出
 babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
 babel example.js --out-file compiled.js
# 或者
 babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
 babel src --out-dir lib
# 或者
 babel src -d lib
# -s 参数生成source map文件
 babel src -d lib -s

4. Utiliser babel

dans webstorm 0. Créez un nouveau fichier test.js à utiliser comme scénario de test

input.map(item => item + 1);

1. Un fichier doit être ajouté au projet : package.json

{ "name": "application-name", "version": "0.0.1"}

2. Dans le projet en cours, installez babel

npm install --save-dev babel-cli

3. Utilisez la fonction File Watcher fournie avec WebStorm

Préférences > Outils > File Watchers , cliquez sur le signe + à droite, sélectionnez Babel et cliquez directement sur OK.

Une fois l'opération terminée, si vous modifiez le code JS à ce moment, vous constaterez qu'un fichier test-compiled.js est généré de manière synchrone. Après l'avoir ouvert, vous constaterez que le code est cohérent avec le code test.js.

Vous devez également configurer les règles de transcodage, continuez à lire ci-dessous. ↓↓↓

4. Ajoutez un fichier de configuration <span style="color:#000000;font-family:NSimsun;">.babelrc</span>

Le fichier de configuration de Babel est <span style="font-family:NSimsun;">.babelrc</span>, qui est stocké dans le répertoire racine du projet. La première étape de l'utilisation de Babel consiste à configurer ce fichier.

Ce fichier est utilisé pour définir les règles de transcodage et les plug-ins. Le format de base est le suivant.

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

5. Définissez des règles de transcodage

Le champ <span style="font-family:NSimsun;">presets<code><span style="font-family:NSimsun;">presets</span> définit les règles de transcodage. Les ensembles de règles officielles suivants sont fournis et vous pouvez les installer selon vos besoins.

# ES2015转码规则
npm install --save-dev babel-preset-es2015
# react转码规则
npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

Nous devons installer es2015, la commande est la suivante :

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

6. Mettre à jour le fichier de configuration .babelrc

Enregistrez les règles correspondantes dans le fichier de configuration.

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

7. Terminé, vérifiez l'effet

Une fois les étapes ci-dessus terminées, vous pouvez automatiquement convertir le code ES6 en ES5 après avoir modifié le code.

5. Utilisez les commandes pour compiler manuellement le code

1. Modifiez le fichier package.json

{
 "name": "application-name",
 "version": "0.0.1",
 "devDependencies": {
 "babel-cli": "^6.26.0" 
 },
 "scripts": {
 "build": "babel src -d lib"
 }
}

2. Utilisez la commande pour générer du code ES5

npm run build

3. Effet

Le code du répertoire src sera compilé dans le répertoire lib.

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 :

JS convertit la liste en une arborescence

JS permet de faire glisser les images sur le Web page

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!