今回は、Webstorm で babel を使用して ES6 を ES5 に変換する方法と、Webstorm で babel を使用して ES6 を ES5 に変換する際の 注意点 について説明します。実際のケースを見てみましょう。
序文: ECMAScript 6 は、2015 年 6 月に正式にリリースされた 今日は、Babel を使用して ES6 を ES5 に自動的にトランスコードするように Webstorm を設定する方法を共有します。 Babel は広く使用されているトランスコーダーであり、ES6 コードを ES5 コードに完全に変換できるため、ブラウザーのサポートを待たずにプロジェクトで ES6 の機能を使用できます。 1. Webstorm で新しい空のプロジェクトを作成し、es6demo という名前を付けます。 2. 次に、ルート ディレクトリに新しい package.json を作成します。指定する必要があるのは、名前とバージョンという 2 つの属性だけです。 3. Webstorm のターミナルを開き、ショートカット キーは Alt+F12、babel-cli をインストールします。グローバルにインストールすることもできます。 babel-cli をインストールします: npm install --save-dev babel-cli
4. babel-cli をインストールすると、node_modules ファイルと package-lock.json ファイルが新たに生成されることがわかります。同時に、パッケージ内に余分な
"devDependencies": { "babel-cli": "^6.26.0" }
があることがわかります。 .json ファイル。 このようなコード行は、babel-cli が正常にインストールされ、依存関係になったことを示します。
5. 次に、[設定] -> [言語とフレームワーク] で [JavaScript] オプションを選択し、バージョンとして ECMAScript6 を選択します。 6. Webstorm ターミナルで、ES6 コードを正しく識別するために Babel のプリセットをインストールします。コマンドは次のとおりです:
npm install --save-dev babel-preset-es2015
インストール後、package.json ファイルにさらに
が追加されます。 "babel-preset-es2015": "^6.24.1" このコード行は、babel-preset-es2015 が正常にインストールされたことを示します。
7. ルート ディレクトリの下に、次の内容を含む .babelrc という名前の新しいファイルを作成します:
{ "presets": [ "es2015" ] }
8. [ファイル] - [設定] - [ツール] - [ファイル監視] を設定します。
9. test.js というファイルを作成し、エラーを避けるために es6 構文をそのファイルに書き込みます。 test-compiled.js は es5 にコンパイルされたファイルで、デフォルトは strict モードです。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
axios アップロードされた画像に進行状況バーを追加する方法JS は TXT テキストを操作し、指定された場所にコンテンツを挿入します
以上がWebstorm で Babel を使用して ES6 を ES5 に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。