So verwenden Sie Babel in WebStorm ES6

Dieses Mal zeige ich Ihnen, wie Sie Babel in WebStorm ES6 verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Babel in WebStorm ES6?

1. Einstellungen zur Grammatikunterstützung

Einstellungen > Sprachen & Frameworks > 2. Babel

Installation

1. Globale Installation

2. Das aktuelle Projekt ist für die Verwendung verschiedener Babel-Versionen geeignet

 npm install -g babel-cli

3. Grundlegende Verwendung von Babel

 npm install --save-dev babel-cli

4. Verwenden von babel

im Webstorm 0. Erstellen Sie eine neue test.js-Datei zur Verwendung als Testfall

# 转码结果输出到标准输出
 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

1. Dem Projekt muss eine Datei hinzugefügt werden: package.json

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

2. Installieren Sie babel im aktuellen Projekt

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

3. Verwenden Sie die File Watcher-Funktion, die mit WebStorm geliefert wird

Einstellungen > Extras > Klicken Sie auf das +-Zeichen rechts, wählen Sie babel aus und klicken Sie direkt auf OK.

npm install --save-dev babel-cli

Wenn Sie nach Abschluss des Vorgangs den JS-Code zu diesem Zeitpunkt ändern, werden Sie feststellen, dass eine test-compiled.js-Datei synchron generiert wird. Nach dem Öffnen werden Sie feststellen, dass der Code mit dem test.js-Code übereinstimmt.

Sie müssen außerdem Transkodierungsregeln konfigurieren. Lesen Sie weiter unten weiter. ↓↓↓

4. Fügen Sie die

Konfigurationsdatei

hinzu Die Konfigurationsdatei von Babel ist <span style="color:#000000;font-family:NSimsun;">.babelrc</span> und wird im Stammverzeichnis des Projekts gespeichert. Der erste Schritt bei der Verwendung von Babel besteht darin, diese Datei zu konfigurieren.

Diese Datei wird zum Festlegen von Transkodierungsregeln und Plug-Ins verwendet. Das Grundformat ist wie folgt. <span style="font-family:NSimsun;">.babelrc</span>

5. Legen Sie Transkodierungsregeln fest

Das Feld

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

<span style="font-family:NSimsun;">presets<p style="text-align: left;"></p></span> legt die Transkodierungsregeln fest. Die folgenden offiziellen Regelsätze werden bereitgestellt und können bei Bedarf installiert werden.

<span style="font-family:NSimsun;">presets</span> Wir müssen es2015 installieren. Der Befehl lautet wie folgt:

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

# 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

6.

Aktualisieren Sie die

Konfigurationsdatei .babelrc

Speichern Sie die entsprechenden Regeln in der Konfigurationsdatei.

7. Abgeschlossen, überprüfen Sie den Effekt

Nachdem die oben genannten Schritte abgeschlossen sind, können Sie den ES6-Code automatisch in ES5 konvertieren, nachdem Sie den Code geändert haben.

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

5. Verwenden Sie Befehle, um den Code manuell zu kompilieren

1. Ändern Sie die package.json-Datei

2. Verwenden Sie den Befehl, um ES5-Code zu generieren

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

3. Wirkung

Der Code im src-Verzeichnis wird in das lib-Verzeichnis kompiliert.

npm run build

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS wandelt die Liste in eine Baumstruktur um

JS ermöglicht das Ziehen von Bildern im Web Seite

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Babel in WebStorm ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!