WebStorm ES6でbabelを使用する方法

今回は、WebStorm ES6 で babel を使用する方法と、WebStorm ES6 で babel を使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

1. 文法サポート設定

設定 > 言語とフレームワーク >

JavaScript

2.バベル

インストール

1. グローバルインストール

 npm install -g babel-cli

2. 現在のプロジェクトは、異なる Babel バージョンの使用に適しています

 npm install --save-dev babel-cli

3. 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. ウェブストームで Babel を使用する

0. テストケースとして使用する新しい test.js ファイルを作成します

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

1. ファイルをプロジェクトに追加する必要があります: package.json

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

2. 現在のプロジェクトに、babel

npm install --save-dev babel-cli

をインストールします 3. WebStorm に付属の File Watcher 機能を使用する

[環境設定] > [ツール] > [ファイル ウォッチャー] をクリックし、右側の [+] 記号をクリックして [babel] を選択し、[OK] を直接クリックします。

操作が完了した後、この時点で JS コードを変更すると、test-compiled.js ファイルが同期的に生成され、それを開くと、コードが test.js コードと一致していることがわかります。

トランスコーディング ルールを設定する必要もあります。以下を読み続けてください。 ↓↓↓

4.

設定ファイル

<span style="color:#000000;font-family:NSimsun;">.babelrc</span>を追加します Babel の設定ファイルは

で、プロジェクトのルート ディレクトリに保存されます。 Babel を使用する最初のステップは、このファイルを構成することです。 <span style="font-family:NSimsun;">.babelrc</span> このファイルは、トランスコーディング ルールとプラグインを設定するために使用されます。基本的な形式は次のとおりです。

りー

5. トランスコーディングルールを設定します

<span style="font-family:NSimsun;">presets<p style="text-align: left;"></p></span> フィールドでは、次のルール セットが正式に提供されており、必要に応じてインストールできます。 <span style="font-family:NSimsun;">presets</span>りー es2015 をインストールする必要があります。コマンドは次のとおりです:

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

6.

設定ファイル .babelrc を更新

対応するルールを構成ファイルに保存します。 りー

7.完成、効果を確認

上記の手順が完了すると、コードを変更した後に ES6 コードを ES5 に自動的に変換できます。

5. コマンドを使用してコードを手動でコンパイルします

1. package.json ファイルを変更します

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

2. コマンドを使用して ES5 コードを生成します

# 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

3. 効果

src ディレクトリ内のコードは lib ディレクトリにコンパイルされます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS はリストをツリー構造に変換します

JS は Web ページ上で画像をドラッグできるようにします

以上がWebStorm ES6でbabelを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。