Rspack 0.4 版本發佈

2023年11月02日

Rspack 0.4 主要變更

移除 NodeJS 14 的支援

Rspack 不再支援 Node.js 14，現在需要 Node.js 16+。

將 @rspack/core 設定為 @rspack/cli 的 peer dependency

@rspack/core 現在是 @rspack/cli 的 peer dependency，而不是直接依賴。這意味著您現在需要手動安裝 @rspack/core 以及 @rspack/cli。這使 Rspack 更接近 webpack。從長遠來看，@rspack/cli 的定位將不再是開箱即用的解決方案。我們會將 @rspack/cli 與 webpack-cli 對齊，甚至可能直接支援在 webpack-cli 中使用 @rspack/core。我們建議使用Rsbuild 作為開箱即用的解決方案。

棄用預設轉換

experiments.rspackFuture.disableTransformByDefault 在 v0.4.0 中預設啟用。對於仍然需要舊行為的人，您可以手動將此選項設定為 false。

此功能主要解決三類問題：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

由於 experiments.rspackFuture.disableTransformByDefault 在 v0.4.0 中預設啟用，builtin.react.refresh 也已棄用。現在我們建議使用 @rspack/plugin-react-refresh 來啟用 React 快速刷新。

+ 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

之前，有些 API 不應該透過從 @rspack/core 重新匯出而意外匯出。現在透過這個重構，我們清除了從 @rspack/core 匯出的 API。

這不應該會破壞任何東西，但是如果您正在使用意外匯出的 API，這可能會破壞您的程式碼，並且您可能正在以不正規的方式使用 Rspack。

如果真的需要此重構中移除的 API，請在 Rspack 儲存庫中提出問題。

棄用 `builtins.devFriendlySplitChunks` 和 `experiments.newSplitChunks`

為了完全遷移到 Webpack 的程式碼分割實作，這些欄位已棄用。Rspack 將在 v0.5.0 中移除這些欄位。

預設啟用 newResolver

現在預設啟用 New resolver。

新的 resolver 已通過 enhanced-resolve 的所有測試套件。它比之前的實作快 5 倍，比 enhanced-resolve 快 28 倍。

可以設定新的 resolver 來讀取 tsconfig.json 的 compilerOptions.paths 和 references 欄位，並提供對巢狀路徑別名更好的支援。請參閱 API resolve.tsConfig 以取得詳細資訊。

若要退出新的 resolver，請將 experiments.rspackFuture.newResolver 設定為 false。

遷移指南

有一個遷移範例示範如何從 Rspack 0.3.14 遷移到 Rspack 0.4.0。

選擇 `@rspack/cli` 還是 `Rsbuild`？

如果您的應用程式是 CSR 應用程式，我們強烈建議您使用 Rsbuild 而不是自行設定 Rspack，因為與 @rspack/cli 相比，Rsbuild 更容易使用。

升級 Node.js 版本

從 0.4.0 版本開始，Rspack 不再支援 Node.js 14；現在需要 Node.js 16+。

手動安裝 `@rspack/core` 以及 `@rspack/cli`

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 的內部插件分為兩類

與 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 主要變更#

移除 NodeJS 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/core 以及 @rspack/cli#

使用 builtin:swc-loader 來支援模組轉換#

為 React 應用程式使用 @rspack/plugin-react-refresh#

將內建選項遷移至內建插件#