This div is used to preload the font
指南
配置
插件
API
社区
指南
配置
插件
API
社区
简体中文

Rsbuild v0.4 发布

February 06, 2024

Rsbuild v0.4 版本提供内置的模块联邦支持。此外，还包含一些 API 的不兼容更新，请参考当前文档进行升级。

模块联邦配置

Rsbuild 现在提供一个内置的 moduleFederation 选项，这将使得在 Rsbuild 中配置模块联邦变得更加容易。

  • 示例：
rsbuild.config.ts
export default defineConfig({
  moduleFederation: {
    options: {
      // ModuleFederationPluginOptions
    },
  },
});

当你使用该选项时，Rsbuild 会自动修改默认的 publicPath 和 splitChunks 配置，使模块联邦可以开箱即用。

详见 RFC - Provide first-class support for Module Federation。

插件 Hook 顺序

在 Rsbuild 插件中使用 hook 时，现在可以通过 order 字段来声明 hook 的顺序：

const myPlugin = () => ({
  setup: (api) => {
    api.modifyRsbuildConfig({
      handler: () => console.log('hello'),
      order: 'pre',
    });
  },
});

详见 Plugin Hooks。

重命名 disableFilenameHash

output.disableFilenameHash 配置已被重命名为 output.filenameHash。

  • 更改前：
export default {
  output: {
    disableFilenameHash: true,
  },
};
  • 更改后：
export default {
  output: {
    filenameHash: false,
  },
};

移除 postcss-flexbugs-fixes

Rsbuild v0.4 移除了内置的 postcss-flexbugs-fixes 插件。

该插件用于修复 IE 10 / 11 中的一些 flex bug。考虑到现代浏览器已经不再存在这些 flex 问题，我们移除了这个插件以提高构建性能。

如果你的项目需要兼容 IE 10 / 11 ，并且遇到了这些 flex 问题，你可以在 Rsbuild 中手动添加这个插件：

  • 安装插件：
npm add postcss-flexbugs-fixes -D
  • 在 postcss.config.cjs 中注册插件：
module.exports = {
  'postcss-flexbugs-fixes': {},
};

Pure React 插件

React 插件已移除对 antd v4 和 @arco-design/web-react 的默认 source.transformImport 配置。

与组件库相关的配置应该在组件库相关的插件中提供，如 rsbuild-plugin-antd 或 rsbuild-plugin-arco，而 React 插件会专注于提供 React 基础的能力。

  • 如果你的项目正在使用 antd v3 或 v4，你可以手动添加以下配置：
rsbuild.config.ts
export default {
  source: {
    transformImport: [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  },
};
  • 如果你的项目正在使用 @arco-design/web-react v3 或 v4，你可以手动添加以下配置：
rsbuild.config.ts
export default {
  source: {
    transformImport: [
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        camelToDashComponentName: false,
        style: true,
      },
      {
        libraryName: '@arco-design/web-react/icon',
        libraryDirectory: 'react-icon',
        camelToDashComponentName: false,
      },
    ],
  },
};

JavaScript API

loadConfig 方法现在会返回配置内容和配置文件的路径：

import { loadConfig } from '@rsbuild/core';

// v0.3
const config = await loadConfig();

// v0.4
const { content, filePath } = await loadConfig();