プレーンJavaScript、Billboard JS、JQuery、Metal JS、React、またはVue JSプロジェクトを移行してLiferay npm Bundler 2.xを使用する

プレーンJavaScript、Billboard JS、JQuery、Metal JS、React、またはVue JSプロジェクトを移行してLiferay npm Bundler 2.xを使用する

以下に示すフレームワークプロジェクトを移行してliferay-npm-bundler 2.xを使用するには、次の手順に従います。

  • プレーンJavaScriptプロジェクト
  • Billboard.jsプロジェクト
  • jQueryプロジェクト
  • Metal.jsプロジェクト
  • Reactプロジェクト
  • Vue.jsプロジェクト

ソースファイルをトランスパイルするにはBabelが必要ですが、トランスフォーマーに使用されるBabelプリセットを、バンドル1.xが課したプロジェクトから削除する必要があります。 liferay-npm-bundler 2.xは、デフォルトでこれらの変換を処理します。

  1. package.jsonの依存関係liferay-npm-bundlerをバージョン2.xにアップデートします。

    {
      "devDependencies": {
        ...
        "liferay-npm-bundler": "^2.0.0",
        ...
      },
      ...
    }
    
  2. すべてのliferay-npm-bundler-preset-*依存関係をpackage.jsonから削除します。liferay-npm-bundler 2.xにはデフォルトでこれらが含まれているためです。

  3. .npmbundlerrc ファイルで構成したバンドラープリセットを削除します。 liferay-npm-bundler 2.xには、すべてのフレームワークを自動的に処理する1つのスマートプリセットが含まれています。

  4. プロジェクトの .babelrc ファイルから liferay-project プリセットを削除します。 残すべきは、以下に示す es2015 プリセットだけです。

    {
      "presets": ["es2015"]
    }
    

    プロジェクトでReactを使用している場合は、react プリセットも残っていることを確認してください。

    {
      "presets": ["es2015", "react"]
    }
    
  5. package.jsonから babel-preset-liferay-project 依存関係を削除します。

プロジェクトは、liferay-npm-bundler 2.xを使用するように移行されます。

関連情報