WebStorm ES6-Syntaxeinstellungen und Einführung in die Verwendung von Babel

Der folgende Editor bringt Ihnen einen Artikel über die WebStorm ES6-Syntaxunterstützungseinstellungen und Babel-Nutzung sowie die automatische Kompilierung (ausführliche Erklärung). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Schauen Sie sich den Editor an

1. Grammatikunterstützungseinstellungen

Einstellungen > JavaScript

2. Babel-Installation

1. Globale Installation

 npm install -g babel-cli

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

 npm install --save-dev babel-cli

3. Grundlegende Verwendung von 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. Verwendung von Babel im Webstorm

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

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

1 Sie müssen dem Projekt eine Datei hinzufügen: package.json

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

2. Installieren Sie babel

npm install --save-dev babel-cli

3 Klicken Sie im Lieferumfang von WebStorm

Einstellungen > File Watchers auf das +-Zeichen, wählen Sie „babel“ aus und klicken Sie direkt auf „OK“.

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 übereinstimmt der test.js-Code.

Sie müssen auch Transkodierungsregeln konfigurieren, lesen Sie weiter unten. ↓↓↓

4. Konfigurationsdatei <span style="color:#000000;font-family:NSimsun">.babelrc<code><span style="color:#000000;font-family:NSimsun">.babelrc</span>

Babels Konfigurationsdatei ist <span style="font-family:NSimsun">.babelrc<code><span style="font-family:NSimsun">.babelrc</span>, die im Stammverzeichnis des Projekts gespeichert ist . 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.

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

5. Transkodierungsregeln festlegen

<span style="font-family:NSimsun">Voreinstellungen<code><span style="font-family:NSimsun">presets</span>Das Feld legt die Transkodierungsregeln fest. Die folgenden Regelsätze werden offiziell bereitgestellt und können bei Bedarf installiert werden.

# 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

Wir müssen es2015 installieren, der Befehl lautet wie folgt:

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

6. Aktualisieren Sie die Konfigurationsdatei.babelrc

Speichern Sie die entsprechenden Regeln in der Konfigurationsdatei.

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

7. Abschließen, den Effekt überprüfen

Nachdem die oben genannten Schritte abgeschlossen sind, können Sie den ES6-Code nach der Änderung automatisch in ES5 konvertieren Code.

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

1. Ändern Sie die Datei package.json

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

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

npm run build

3 >

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

Das obige ist der detaillierte Inhalt vonWebStorm ES6-Syntaxeinstellungen und Einführung in die Verwendung von Babel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!