Rspack 0.5 リリースのお知らせ

2024年1月9日

主要な機能アップデート

RspackにModule Federationを追加

詳細はこちらのブログをご覧ください。

破壊的変更

optimization.chunkIds は本番モードではデフォルトで決定論的

optimization.chunkIds は、webpackのデフォルトの動作に合わせて、本番モードでは"deterministic"になりました。

rspack.HotModuleReplacementPluginをサポート

Rspackでrspack.HotModuleReplacementPluginをサポートしました。 @rspack/dev-serverを使用せずにカスタム開発サーバーを使用している場合は、devServer.hotをtrueに設定する代わりに、HotModuleReplacementPluginを適用してHMRを有効にする必要があります。これはwebpackと同じです。これにより、HotModuleReplacementPluginを内部的に使用するプラグインとの互換性が向上します。

デフォルトの変換を削除

デフォルトの変換は組み込み機能であり、内部的にソースファイル（TypeScriptなど）を互換性のあるソース（JavaScriptなど）に変換します。変換をよりカスタマイズできるように、この機能をbuiltin:swc-loaderを使用してユーザーに提供し、いくつかのrule.typeのサポートを廃止しました。以下のrule.typeが廃止されました。

"typescript" または "ts"
"tsx"
"jsx"

以前の動作を実現するには、rule.typeを削除するか、"javascript/auto"に変更し、カスタムローダー設定を適用してください。

.jsx ファイルを変換するには

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /[\\/]node_modules[\\/]/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true,
            },
          },
        },
      },
    ],
  },
};

.tsx ファイルを変換するには

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx$/,
        exclude: /[\\/]node_modules[\\/]/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
              tsx: true,
            },
          },
        },
      },
    ],
  },
};

.ts ファイルを変換するには

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /[\\/]node_modules[\\/]/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
            },
          },
        },
      },
    ],
  },
};

target はユーザーコードに影響を与えなくなりました

Rspackはtarget をwebpackに合わせました。任意のユーザーコードを変換する代わりに、Rspackはローダーがユーザーランドコードの変換を制御できるようにしました。ターゲット環境に必要なユーザーランドコードを変換するには、builtin:swc-loaderにenvを追加します。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /[\\/]node_modules[\\/]/,
        loader: "builtin:swc-loader",
        options: {
          jsc: {
            parser: {
              syntax: "ecmascript"
            }
          },
+         env: {
+           targets: "Chrome >= 48"
+         }
        }
      }
    ]
  }
}

拡張解決拡張子を削除

resolve.extensions は、解決中に特定のファイル拡張子を省略するのに役立ちます。以前のバージョンでは、.ts、.tsx、.jsx がサポートされていましたが、webpackの動作に合わせて、これらの拡張子は最新バージョンでは削除されました。

同じ動作を得るには、resolve.extensionsを次のように変更します。

module.exports = {
  resolve: {
    extensions: ['...', '.tsx', '.ts', '.jsx'], // "..." means to extend from the default extensions
  },
};

@swc/helpers と react-refresh を peerDependencies に変更

デフォルトの変換を削除する前は、target によってコードを es5 にダウングレードし、builtin.react.refresh によって react リフレッシュヘルパーコードを react コンポーネントに挿入することができました。そのため、すぐに使えるエクスペリエンスを提供するために、@swc/helpers と react-refresh を @rspack/core の依存関係としてインストールしました。しかし、現在はデフォルトの変換を削除し、すぐに使えるエクスペリエンスには Rsbuild を使用することを推奨しているため、@swc/helpers と react-refresh は @rspack/core によってインストールされる必要がなくなり、@rspack/core の peerDependencies に変更しました。

builtin:swc-loader または swc-loader で externalHelpers: true を使用している場合は、プロジェクトの依存関係として @swc/helpers をインストールする必要があります。 @rspack/plugin-react-refresh を使用している場合は、プロジェクトの devDependencies として react-refresh をインストールする必要があります。

非推奨の builtins オプションを削除

builtins オプションの一部は v0.4.0 以降非推奨となっています。

まだ builtins.noEmitAssets、builtins.devFriendlySplitChunks、builtins.react、builtins.html、builtins.copy、builtins.minifyOptions を使用している場合は、組み込みオプションを組み込みプラグインに移行するを参照して移行してください。

また、まだ builtins.presetEnv、builtins.decorator、builtins.pluginImport、builtins.emotion、builtins.relay を使用している場合は、こちらの移行ガイドを参照してください。

builtin:sass-loader を削除

builtin:sass-loader は v0.4.0 以降非推奨となっています。v0.5.0 で削除されました。まだ使用している場合は、sass-loader に移行してください。

experiments.incrementalRebuild オプションを削除

experiments.incrementalRebuild オプションは v0.4.0 以降非推奨となっています。v0.5.0 で削除されました。

builtins.devFriendlySplitChunks と experiments.newSplitChunks を削除

experiments.newSplitChunks と builtins.devFriendlySplitChunks は v0.4.0 以降非推奨となっています。v0.5.0 で削除されました。

experiments.rspackFuture.newResolver オプションを削除

experiments.rspackFuture.newResolver は v0.4.0 以降非推奨となっています。v0.5.0 で削除されました。

遅延エントリ適用を非推奨化

遅延エントリ適用は rspackFuture によって非推奨になります: experiments.rspackFuture.disableApplyEntryLazily。これは v0.4.5 で導入され、v0.5.0 でデフォルトで有効になり、v0.6.0 で削除されます。

experiments.rspackFuture.disableApplyEntryLazily が false の場合、options.entry は rspack(options) が呼び出された後でも有効な変更を加えることができますが、true の場合はできなくなり、webpack5 と同じ動作になります。

この設定は、Rspack でアプリケーションを開発しているユーザーにはほとんどの場合影響ありませんが、Rspack プラグインまたは上位フレームワークの開発者には注意が必要です。

移行ガイド

v0.5.0 では、多くの非推奨機能が削除されました。それ以外に、v0.5.0 では 4 つの破壊的変更が導入されましたが、Rspack を使用してアプリケーションを開発している場合は、そのうちの 2 つにのみ注意する必要があります。そのため、非推奨の警告なしで v0.4+ に既に移行している場合は、v0.5.0 への移行は簡単です。まだ移行していない場合は、v0.4.0 移行ガイドを参照してください。

resolve.extensions を追加

これは、最も影響を受ける可能性のある破壊的変更です。

@rspack/core を v0.5.0 にアップグレードした後、'./src/foo.tsx' を解決できません、または './src/foo.ts' を解決できません、または './src/foo.jsx' を解決できません というエラーでビルドに失敗した場合は、設定に resolve.extensions = ['...', '.tsx', '.ts', '.jsx'] を追加する必要があります。

const configuration = {
  // ...
  resolve: {
+   extensions: ['...', '.tsx', '.ts', '.jsx'],
  },
}

必要な拡張子のみを resolve.extensions に追加する必要があります。たとえば、.tsx または .ts ファイルを使用せず、.js または .jsx ファイルのみを使用している場合は、'.jsx' のみを resolve.extensions に追加する必要があります。 '.js' はデフォルトの拡張子の 1 つであり、すべてのデフォルトの拡張子 (['.js', '.json', '.wasm']) は '...' で表されます。

@swc/helpers または react-refresh をインストール

これは、最も影響を受ける可能性のある破壊的変更です。

@rspack/core を v0.5.0 にアップグレードした後、@swc/helpers/some-helper を解決できませんでした または react-refresh/some-module を解決できませんでした というエラーでビルドに失敗した場合は、プロジェクトに @swc/helpers または react-refresh をインストールする必要があります。

builtin:swc-loader または swc-loader で externalHelpers: true を使用している場合は、プロジェクトの依存関係として @swc/helpers をインストールする必要があります。

npm

yarn

pnpm

bun

npm install @swc/helpers

@rspack/plugin-react-refresh を使用している場合は、プロジェクトの devDependencies として react-refresh をインストールする必要があります。

npm

yarn

pnpm

bun

npm install react-refresh

rspack.HotModuleReplacementPluginを適用する

@rspack/cli、rsbuild、またはその他の Rspack の上位レベルのフレームワークを使用してアプリケーションを開発している場合は、これについて心配する必要はありません。これは、上位レベルのフレームワークまたは CLI によって適切に処理されるはずです。ただし、カスタム開発サーバー（@rspack/dev-server または webpack-dev-server ではない）で @rspack/core を使用している場合、またはカスタム開発サーバーを開発している場合は、これに注意する必要があります。

Rspack で HMR を有効にするには、以前は devServer.hot を true に設定していましたが、現在はカスタム開発サーバーで HotModuleReplacementPlugin を自分で適用する必要があります。

class CustomDevServer {
  // ...
  enableHMR(compiler) {
-   compiler.options.devServer ??= {};
-   compiler.options.devServer.hot = true;
+   new compiler.webpack.HotModuleReplacementPlugin().apply(compiler);
  }
}

rspack(options) 後にエントリオプションを変更しないでください

@rspack/cli、rsbuild、またはその他の Rspack の上位レベルのフレームワークを使用してアプリケーションを開発している場合は、これについて心配する必要はありません。これは、上位レベルのフレームワークまたは CLI によって適切に処理されるはずです。ただし、プラグインまたは上位レベルのフレームワークを開発している場合は、これに注意する必要があります。

以前は Rspack で追加のエントリを付加するには compiler.options.entry に付加していましたが、現在は EntryPlugin を自分で適用する必要があります。

const rspack = require('@rspack/core');
const compiler = rspack(options);

function prependEntry(compiler, additionalEntry) {
-  for (const key in compiler.options.entry) {
-    compiler.options.entry[key].import = [
-      additionalEntry,
-      ...(compiler.options.entry[key].import || []),
-    ];
-  }
+  new compiler.webpack.EntryPlugin(compiler.context, additionalEntry, {
+    name: undefined, // `name: undefined` to prepend the it to every entry, or add it to a specified entry with specified entry name
+  }).apply(compiler);
}

prependEntry(compiler, 'dev-client.js');

このページの内容

Rspack 0.5 リリースのお知らせ#

主要な機能アップデート#

RspackにModule Federationを追加#

破壊的変更#

optimization.chunkIds は本番モードではデフォルトで決定論的#

rspack.HotModuleReplacementPluginをサポート#

デフォルトの変換を削除#

target はユーザーコードに影響を与えなくなりました#

拡張解決拡張子を削除#

@swc/helpers と react-refresh を peerDependencies に変更#

非推奨の builtins オプションを削除#

builtin:sass-loader を削除#

experiments.incrementalRebuild オプションを削除#

builtins.devFriendlySplitChunks と experiments.newSplitChunks を削除#

experiments.rspackFuture.newResolver オプションを削除#

遅延エントリ適用を非推奨化#

移行ガイド#

resolve.extensions を追加#

@swc/helpers または react-refresh をインストール#

rspack.HotModuleReplacementPluginを適用する#

rspack(options) 後にエントリオプションを変更しないでください#