Rspack 0.4 リリースのお知らせ

2023年11月2日

Rspack 0.4 主な変更点

Node.js 14 のサポート終了

Rspack は Node.js 14 のサポートを終了しました。Node.js 16 以降が必要です。

@rspack/core を @rspack/cli の peer dependency に変更

@rspack/core は、直接の依存関係ではなく、@rspack/cli の peer dependency になりました。つまり、@rspack/cli と共に @rspack/core を手動でインストールする必要があります。これにより、Rspack は webpack とより密接に連携します。長期的には、@rspack/cli の位置付けは、すぐに使えるソリューションではなくなります。 @rspack/cli を webpack-cli と連携させ、webpack-cli で @rspack/core を直接使用できるようにすることもあります。すぐに使えるソリューションとしては、Rsbuild をお勧めします。

デフォルト変換の非推奨化

v0.4.0 では、experiments.rspackFuture.disableTransformByDefault がデフォルトで有効になっています。従来の動作が必要な場合は、このオプションを false に手動で設定してください。

この機能は、主に3つのカテゴリの問題に対処します。builtins コード変換機能、target、およびカスタム Rule.type です。

一部の builtins 機能のサポート終了

builtins.relay: rspackExperiments.relay に移動しました
builtins.react: jsc.transform.react に移動しました
builtins.emotion: rspackExperiments.emotion に移動しました
builtins.pluginImport: rspackExperiments.import に移動しました
builtins.decorator: jsc.parser.decorators に移動しました
builtins.presetEnv: jsc.env に移動しました

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true,
            },
            transform: {
              react: {
                runtime: 'automatic',
              },
            },
          },
          rspackExperiments: {
            emotion: true, // The same as `builtins`
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
  experiments: {
    rspackFuture: {
      disableTransformByDefault: true,
    },
  },
};

target は、ユーザー側コード（node_modules を含む）をダウングレードしません

module.exports = {
  target: ["web", "es5"],
  module: {
    rules: [
      {
        test: /\.[cm]?js$/,
        exclude: /node_modules/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: "ecmascript"
            },
+           target: "es5" // Notice: `jsc.target` and `env` cannot be set at the same time.
          },
+        env: { //  Notice: `jsc.target` and `env` cannot be set at the same time.
+         targets: "chrome >= 48"
+        }
        }
        type: 'javascript/auto',
      },
    ],
  }
};

webpack と互換性のない Rule.type を削除しました

以下のタイプは削除されました

"typescript"
"jsx"
"tsx"

JS関連のタイプは、以下のみが保持されます

"javascript/auto"
"javascript/esm"
"javascript/dynamic"

完全な移行ガイドについては、こちらを参照してください。

以前の議論はこちらで確認できます。

builtin.react.refresh の非推奨化

v0.4.0 では experiments.rspackFuture.disableTransformByDefault がデフォルトで有効になっているため、builtin.react.refresh も非推奨になりました。React Fast Refresh を有効にするには、@rspack/plugin-react-refresh を使用することをお勧めします。

+ const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  // ...
  mode: isDev ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
+                  development: isDev,
+                  refresh: isDev,
                },
              },
            },
          },
        },
      },
    ],
  },
-  builtins: {
-    react: {
-      refresh: true,
-    }
-  },
  plugins: [
+    isDev && new ReactRefreshPlugin()
  ].filter(Boolean),
};

詳細はこちらをご確認ください。

builtin:sass-loader の非推奨化

builtin:sass-loader は非推奨になりました。使用している場合は、sass-loader に移行してください。Rspack は v0.5.0 で builtin:sass-loader を削除します。

experiments.incrementalRebuild の非推奨化

experiments.incrementalRebuild は非推奨になりました。Rspack は v0.5.0 でこれを削除します。

@rspack/core の export api のリファクタリング

以前は、@rspack/core からの再エクスポートによって、誤ってエクスポートされるべきではない API がエクスポートされていました。このリファクタリングにより、@rspack/core からのエクスポート API をクリーンアップしました。

これは何も壊すことはありませんが、意図せずにエクスポートされた API を使用している場合は、問題が発生する可能性があり、Rspack をハッキング的な方法で使用している可能性があります。

このリファクタリングによって削除された API が本当に必要な場合は、Rspack リポジトリで issue を作成してください。

`builtins.devFriendlySplitChunks` と `experiments.newSplitChunks` の非推奨化

Webpack の分割チャンク実装に完全に移行するために、これらのフィールドは非推奨になりました。Rspack は v0.5.0 でこれらのフィールドを削除します。

newResolver をデフォルトで有効化

新しいリゾルバーがデフォルトで有効になりました。

新しいリゾルバーは、enhanced-resolve のすべてのテストスイートに合格しました。以前の実装よりも5倍高速で、enhanced-resolve よりも28倍高速です。

新しいリゾルバーは、tsconfig.json の compilerOptions.paths と references フィールドを読み取るように設定でき、ネストされたパスエイリアスをより適切にサポートします。詳細は API resolve.tsConfig を参照してください。

新しいリゾルバーをオプトアウトするには、experiments.rspackFuture.newResolver を false に設定します。

移行ガイド

Rspack 0.3.14 から Rspack 0.4.0 に移行する方法を示す移行例があります。

`@rspack/cli` または `Rsbuild` を選択しますか？

アプリケーションが CSR アプリケーションの場合は、Rspack を自分で設定する代わりに Rsbuild を使用することを強くお勧めします。Rsbuild は @rspack/cli よりもはるかに使いやすいためです。

Node.js バージョンのアップグレード

バージョン 0.4.0 以降、Rspack は Node.js 14 をサポートしなくなりました。Node.js 16 以降が必要です。

`@rspack/cli` と共に `@rspack/core` を手動でインストールする

package.json

{
  "devDependencies": {
+    "@rspack/core": "0.4.0",
     "@rspack/cli": "0.4.0"
  }
}

`builtin:swc-loader` を使用してモジュール変換をサポートする

バージョン 0.4.0 以降、Rspack はデフォルトでファイルを変換しなくなりました。次の設定で古い変換動作を有効にすることはできます

{
  experiments: {
    rspackFuture: {
      disableTransformByDefault: false; // set to old transform behavior
    }
  }
}

ただし、現在は builtin:swc-loader を使用してファイルを変換することをお勧めします。詳細はデフォルト変換の非推奨化を参照してください。

React アプリケーションに `@rspack/plugin-react-refresh` を使用する

デフォルトの変換を無効にすると builtin.react.refresh は機能しないため、@rspack/plugin-react-refresh を使用して高速リフレッシュを有効にする必要があります。詳細は builtin.react.refresh の非推奨化を参照してください。

組み込みオプションを組み込みプラグインに移行する

v0.4.0 において、Rspack はいくつかの組み込みオプションを非推奨とし、組み込みプラグインに移行しました。

現在、Rspack の内部プラグインは2つのカテゴリに分類されます。

Webpack と互換性のあるプラグイン (DefinePlugin、ProvidePlugin など)。この部分は webpack と完全に整合しています。
Rspack 固有のプラグイン (SwcJsMinimizerRspackPlugin、CopyRspackPlugin など)。

元の builtins.define は、次のように移行できます。

+ const rspack = require("@rspack/core")
module.exports = {
-  builtins: {
-    define: { process.env.NODE_ENV: JSON.stringify(process.env.NODE_ENV) }
-  },
+  plugins: [
+    new rspack.DefinePlugin({ process.env.NODE_ENV: JSON.stringify(process.env.NODE_ENV) })
+  ]
}

builtins.html の場合は、HtmlRspackPlugin に直接移行できます。

+ const rspack = require("@rspack/core")
module.exports = {
-  builtins: {
-    html: [{ template: "./index.html" }]
-  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({ template: "./index.html" })
+  ]
}

builtins.html に複数の設定がある場合は、複数のプラグインインスタンスを作成できます。

const rspack = require('@rspack/core');
module.exports = {
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
    new rspack.HtmlRspackPlugin({ template: './foo.html' }),
  ],
};

builtins.copy の場合は、CopyRspackPlugin に直接移行できます。

元の builtins.minifyOptions については、SwcJsMinimizerRspackPlugin を提供しています。

const rspack = require('@rspack/core');
module.exports = {
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        // minimizer configuration
      }),
    ],
  },
};

その他の組み込みオプションは、Rspack の組み込みプラグインを参照して移行するか、v0.4.0 にアップグレードした後に CLI のプロンプトに従って完了できます。

このページの内容

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

Rspack 0.4 主な変更点#

Node.js 14 のサポート終了#

@rspack/core を @rspack/cli の peer dependency に変更#

デフォルト変換の非推奨化#

builtin.react.refresh の非推奨化#

builtin:sass-loader の非推奨化#

experiments.incrementalRebuild の非推奨化#

@rspack/core の export api のリファクタリング#

builtins.devFriendlySplitChunks と experiments.newSplitChunks の非推奨化#

newResolver をデフォルトで有効化#

移行ガイド#

@rspack/cli または Rsbuild を選択しますか？#

Node.js バージョンのアップグレード#

@rspack/cli と共に @rspack/core を手動でインストールする#

builtin:swc-loader を使用してモジュール変換をサポートする#

React アプリケーションに @rspack/plugin-react-refresh を使用する#

組み込みオプションを組み込みプラグインに移行する#