ホームページ > 記事 > ウェブフロントエンド > WebStorm ES6でbabelを使用する方法
今回は、WebStorm ES6 で babel を使用する方法と、WebStorm ES6 で babel を使用する際の 注意事項 を説明します。実際のケースを見てみましょう。
1. 文法サポート設定 設定 > 言語とフレームワーク >2.バベル
インストール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-33. 効果 src ディレクトリ内のコードは lib ディレクトリにコンパイルされます。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
JS はリストをツリー構造に変換します
JS は Web ページ上で画像をドラッグできるようにします
以上がWebStorm ES6でbabelを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。