English

Rspack 0.4 版本发布

2023 年 11 月 02 日

Rspack 0.4 主要变更

不再支持 NodeJS 14

Rspack 不再支持 Node.js 14，现在需要 Node.js 16+。

将 @rspack/core 设置为 @rspack/cli 的对等依赖

@rspack/core 现在是 @rspack/cli 的对等依赖，而不是直接依赖。这意味着您现在需要手动安装 @rspack/core 和 @rspack/cli。这使 Rspack 更接近 webpack。从长远来看，@rspack/cli 的定位将不再是开箱即用的解决方案。我们将 @rspack/cli 与 webpack-cli 对齐，甚至可能直接支持在 webpack-cli 中使用 @rspack/core。我们推荐 Rsbuild 作为开箱即用的解决方案。

弃用默认转换

在 v0.4.0 中，experiments.rspackFuture.disableTransformByDefault 默认启用。对于仍然需要旧行为的人员，您可以手动将此选项设置为 false。

此功能主要解决三类问题：内置代码转换功能，目标和自定义的 Rule.type。

删除对某些内置功能的支持

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,
    },
  },
};

目标不会降级用户端代码（包括 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 也已被弃用。现在我们建议使用 @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 中的导出 API

之前，一些 API 不应该被导出，但实际上却通过 @rspack/core 的重新导出而意外地被导出了。现在，通过这次重构，我们清理了 @rspack/core 中的导出 API。

这应该不会造成任何破坏，但如果您正在使用意外导出的 API，这可能会导致您的应用出现问题，并且您可能正在以 hacky 的方式使用 Rspack。

如果您确实需要这次重构中删除的 API，请在 Rspack 存储库中提交问题。

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

为了完全迁移到 Webpack 的拆分块实现，这些字段已被弃用。Rspack 将在 v0.5.0 中删除这些字段。

默认启用 newResolver

现在默认启用 newResolver。

newResolver 已通过所有 enhanced-resolve 的测试套件。它比之前的实现快 5 倍，比 enhanced-resolve 快 28 倍。

newResolver 可以配置为读取 tsconfig.json 的 compilerOptions.paths 和 references 字段，并提供对嵌套路径别名的更好支持。有关详细信息，请参见 API resolve.tsConfig。

要禁用 newResolver，请将 experiments.rspackFuture.newResolver 设置为 false。

迁移指南

有一个迁移示例演示了如何从 Rspack 0.3.14 迁移到 Rspack 0.4.0。

选择 `@rspack/cli` 或 `Rsbuild`？

如果您的应用程序是 CSR 应用程序，我们强烈建议您使用 Rsbuild 而不是自己配置 Rspack，因为 Rsbuild 比 @rspack/cli 更易于使用。

升级 Node.js 版本

从 v0.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` 来支持模块转换

从 v0.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 的对等依赖#

弃用默认转换#

弃用 builtin.react.refresh#

弃用 builtin:sass-loader#

弃用 experiments.incrementalRebuild#

重构 @rspack/core 中的导出 API#

弃用 builtins.devFriendlySplitChunks 和 experiments.newSplitChunks#

默认启用 newResolver#

迁移指南#

选择 @rspack/cli 或 Rsbuild？#

升级 Node.js 版本#

手动安装 @rspack/core 和 @rspack/cli#

使用 builtin:swc-loader 来支持模块转换#

在 React 应用程序中使用 @rspack/plugin-react-refresh#

将内置选项迁移到内置插件#