Webstorm で Babel を使用して ES6 を ES5 に変換する方法

今回は、Webstorm で babel を使用して ES6 を ES5 に変換する方法と、Webstorm で babel を使用して ES6 を ES5 に変換する際の 注意点 について説明します。実際のケースを見てみましょう。

序文: ECMAScript 6 は、2015 年 6 月に正式にリリースされた

JavaScript 言語の次世代標準です。 Mozilla はこの標準に基づいて JavaScript を開始します 2.0。 ES6 の目標は、JavaScript 言語を使用して大規模で複雑なアプリケーションを作成できるようにし、エンタープライズ レベルの開発言語になることです。ただし、最新のブラウザは ES6 の新機能を高度にサポートしていないため、ES6 の新機能をブラウザで直接使用したい場合は、他のツールを使用する必要があります。

今日は、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 の JSON データ グループ化を最適化する方法

JS は TXT テキストを操作し、指定された場所にコンテンツを挿入します

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