コンテンツにスキップ

1. webpackプロジェクトの移行

このガイドでは、Wrangler v1からWrangler v2へのwebpackプロジェクトの移行手順を説明します。このガイドを完了したら、Wranglerのバージョンを更新してください。

以前のバージョンのWranglerは、wrangler.toml内のtypeおよびwebpack_configキーを使用して、webpack ↗の基本的なサポートを提供していました。Wrangler v2からは、Wranglerはtypeおよびwebpack_configキーをサポートしなくなりましたが、引き続きWorkersでwebpackを使用することができます。

Workersでwebpackを使用している開発者は、次の4つのカテゴリのいずれかに該当するかもしれません。

  1. 私は[build]を使用して、wranglerの外部でwebpack（または他のバンドラー）を実行します。.

  2. 私はtype = webpackを使用していますが、自分の設定を提供せず、Wranglerに任せます。.

  3. 私はtype = webpackとwebpack_config = <path/to/webpack.config.js>を使用して、JSX、TypeScript、WebAssembly、HTMLファイル、およびその他の非標準ファイルタイプを処理します。.

  4. 私はtype = webpackとwebpack_config = <path/to/webpack.config.js>を使用して、コード変換やその他のコード修正機能を実行します。.

自分がどのカテゴリにも該当しない場合は、問題を報告してください ↗。特定の状況についてお手伝いし、将来の読者のためにこのガイドを改善することができます。

私は[build]を使用して、wranglerの外部でwebpack（または他のバンドラー）を実行します。

Wrangler v2は[build]キーをサポートしているため、あなたのWorkersは引き続き自分のセットアップを使用してビルドされます。

私はtype = webpackを使用していますが、自分の設定を提供せず、Wranglerに任せます。

Wranglerは引き続きそれを管理します。wrangler.tomlファイルからtype = webpackを削除してください。

私はtype = webpackとwebpack_config = <path/to/webpack.config.js>を使用して、JSX、TypeScript、WebAssembly、HTMLファイル、およびその他の非標準ファイルタイプを処理します。

Wrangler v2では、このユースケースに対する組み込みサポートがあります。詳細については、バンドリングを参照してください。

WorkersランタイムはJSXとTypeScriptを処理します。必要なモジュールをコードにimportすることができ、Workersランタイムはそれらを自動的にビルドされたWorkerに含めます。

wrangler.tomlファイルからtypeおよびwebpack_configキーを削除する必要があります。

私はtype = webpackとwebpack_config = <path/to/webpack.config.js>を使用して、コード変換やその他のコード修正機能を実行します。

Wrangler v2は、type = webpackやwebpack_configキーを介した設定を含むプロジェクトタイプのサポートを廃止しました。あなたのwebpack設定がローダーの追加を超える操作を行う場合（例えば、TypeScript用）、カスタムwebpack設定を維持する必要があります。長期的には、外部の[build]プロセスに移行するべきです。短期的には、以下の手順に従うことで、Wrangler v1のビルド手順を新しいバージョンのWranglerで再現することが可能です。

  1. wranglerjs-compat-webpack-plugin ↗をdevDependencyとして追加します。

wrangler-js ↗は、Wrangler v1 ↗とは別のライブラリとして提供されており、あなたのためにwebpack 4 ↗を設定して実行するNodeスクリプトです。type = webpackを設定すると、Wrangler v1はこのスクリプトを実行していました。この機能を新しいパッケージwranglerjs-compat-webpack-plugin ↗に移植しました。これはwebpackプラグイン ↗として使用できます。

そのためには、依存関係として追加する必要があります：

npm install --save-dev webpack@^4.46.0 webpack-cli wranglerjs-compat-webpack-plugin
# または
yarn add --dev webpack@4.46.0 webpack-cli wranglerjs-compat-webpack-plugin

これがpackage.jsonファイルに反映されるはずです：

{
  "name": "my-worker",
  "version": "x.y.z",
  // ...
  "devDependencies": {
    // ...
    "wranglerjs-compat-webpack-plugin": "^x.y.z",
    "webpack": "^4.46.0",
    "webpack-cli": "^x.y.z"
  }
}
  1. webpack.config.jsにwranglerjs-compat-webpack-pluginを追加します。

インストールしたプラグインを含めるようにwebpack.config.jsファイルを修正します。

const {
  WranglerJsCompatWebpackPlugin,
} = require("wranglerjs-compat-webpack-plugin");


module.exports = {
  // ...
  plugins: [new WranglerJsCompatWebpackPlugin()],
};
  1. package.jsonにビルドスクリプトを追加します。
{
  "name": "my-worker",
  "version": "2.0.0",
  // ...
  "scripts": {
    "build": "webpack" // <-- この行を追加！
    // ...
  }
}
  1. wrangler.tomlからサポートされていないエントリを削除します。

wrangler.tomlファイルからtypeおよびwebpack_configキーを削除してください。これらはもはやサポートされていません。

# これを削除！
type = "webpack"
webpack_config = "webpack.config.js"
  1. WranglerにWorkerをバンドルする方法を教えます。

WranglerはもはやWorkerをビルドする方法を知りません。webpackを呼び出す方法とwebpackの出力を探す場所を教える必要があります。これは2つのフィールドに翻訳されます：

main = "./worker/script.js" # デフォルト、またはwebpackが出力するファイル
[build]
command = "npm run build" # または "yarn build"
# ...
  1. プロジェクトをテストします。

npx wrangler deployを実行して、設定が期待通りに機能するかテストしてみてください。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings