PHP 開発: Babel と Webpack を使用した ES6+ 構文変換とモジュール パッケージ化

新世代の JavaScript 標準 ES6 (ECMAScript 2015) のリリースにより、JavaScript は言語の点で大幅に改善されました。 ES6 には、アロー関数、テンプレート文字列、クラス、モジュールなどの多くの新しい言語機能が含まれており、これにより JavaScript がより読みやすく、効率的で、開発が容易になります。

しかし、ES6 仕様がリリースされてから数年が経ちますが、実際の開発プロセスでは、ブラウザの互換性の理由により、最新のブラウザでも ES6 の構文やモジュールが完全にはサポートされていません。したがって、古いブラウザで実行するには、開発者はコンバータを使用して ES6 構文を ES5 構文に変換する必要があります。同時に、コードの管理とメンテナンスを容易にするために、モジュールをパッケージ化し、複数の JavaScript ファイルを 1 つ以上のバンドル ファイルにマージする必要もあります。

PHP 開発では、フロントエンドで ES6 構文とモジュールを使用する必要がある場合、Babel や Webpack などのツールを使用して、これらのタスクを完了できます。

Babel の概要

Babel は、ES6 コードを ES5 コードに変換できる JavaScript コンパイラーで、コードが古いブラウザーでも適切に実行できるようにします。 Babel は、最新の標準構文を JavaScript でコンパイルできると同時に、Promises、ジェネレーター、テンプレート文字列などのいくつかの新しい API も変換できます。 Babel は、ES6 モジュール構文を CommonJS、AMD、UMD、SystemJS などのさまざまなモジュール システムに変換することをサポートしています。

Webpack の概要

Webpack は、最新の JavaScript アプリケーション用の静的モジュール バンドラーです。 Webpack は、JavaScript モジュールと依存関係だけでなく、CSS、画像、フォントなどの他のリソースも処理できます。 Webpack は、複数の JavaScript モジュールを 1 つ以上のバンドル ファイルにパッケージ化して、ブラウザーで簡単にロードできます。 Webpack の主な利点は、高度に構成可能で柔軟性があることです。

Babel と Webpack を使用して ES6 の構文変換とモジュールのパッケージ化を行う方法

以下では、Babel と Webpack を使用して ES6 の構文変換とモジュールのパッケージ化を行う方法を紹介します。

前提条件

1. node.js のインストール
2. npm のインストール
3. コマンド ラインで次のコマンドを実行して、Babel と Webpack をインストールします。

npm install --save-dev @babel/core @babel/cli @babel/preset-env webpack webpack-cli babel-loader

Babel の構成

Babel をインストールした後、.babelrc ファイルを構成する必要があります。このファイルは、どのコードを変換する必要があるか、そしてそれをどのように変換するかを Babel に伝えます。

ルート ディレクトリに .babelrc ファイルを作成し、次のコードを入力します。

{
  "presets": ["@babel/preset-env"]
}

Preset-env はここで使用されており、現在の環境に基づいてコンパイルする必要がある機能を自動的に選択できます。環境と構成。この設定の後、Babel は ES6 構文をより互換性のある ES5 構文に変換できます。

Webpack の構成

Webpack をインストールした後、webpack.config.js ファイルを作成する必要があります。このファイルには Webpack 設定が含まれています。

ルート ディレクトリに webpack.config.js ファイルを作成し、次のコードを入力します:

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  }
};

• entry: エントリ ファイル パスを指定します;
• output:出力ファイルとパスを指定します;
• module: モジュール ルールを指定します;
• rules: モジュールのロードのルールを指定します;
• test: ローダーによって処理する必要があるファイルを照合します;
• exclude: ローダーで処理する必要のないファイルを除外します;
• use: 使用するローダーを指定します。

テスト コード

上記の設定が完了したら、アロー関数、テンプレート文字列、クラス、モジュールなどの ES6 構文を含むテスト コードを作成します。

プロジェクトのルート ディレクトリに src フォルダーを作成し、そのフォルダー内に app.js ファイルを作成して、次のコードを入力します:

const nums = [1, 2, 3];
const doubles = nums.map((num) => num * 2);
console.log(`The doubles of ${nums} are ${doubles}`);

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old`);
  }
}

const person = new Person('Jack', 25);
person.sayHi();

このコードは、ブラウザーで実行すると表示されます。最近のブラウザは ES6 構文を完全にはサポートしていないため、構文エラーが発生します。

次のコマンドを実行して、コードを dist/bundle.js にパッケージ化します。

npx webpack

次に、ブラウザで dist/index.html ファイルを開くと、ファイルが正しいことがわかります。ブラウザ 欲しい結果が出力されます。

概要

Babel と Webpack は、PHP 開発で ES6 構文とモジュールを使用するのに役立つ 2 つの非常に重要なツールです。シンプルな構成により、ES6 コードを ES5 コードに変換し、モジュールをパッケージ化することが簡単にできます。プロジェクト開発中に、コードをより適切に管理および保守するために、実際の状況に応じて Babel と Webpack を構成できます。

以上がPHP 開発: Babel と Webpack を使用した ES6+ 構文変換とモジュール パッケージ化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。