From 7e979aa36f36a5c49816a19df0f9c96564549ef7 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 6 Feb 2024 22:27:34 +0800 Subject: [PATCH] docs: add announcing Rsbuild v0.4 (#1520) --- .../docs/en/community/releases/_meta.json | 2 +- .../docs/en/community/releases/v0-4.mdx | 148 ++++++++++++++++++ .../docs/zh/community/releases/_meta.json | 2 +- .../docs/zh/community/releases/v0-4.mdx | 148 ++++++++++++++++++ 4 files changed, 298 insertions(+), 2 deletions(-) create mode 100644 packages/document/docs/en/community/releases/v0-4.mdx create mode 100644 packages/document/docs/zh/community/releases/v0-4.mdx diff --git a/packages/document/docs/en/community/releases/_meta.json b/packages/document/docs/en/community/releases/_meta.json index e0c96132ad..bf3e1ec650 100644 --- a/packages/document/docs/en/community/releases/_meta.json +++ b/packages/document/docs/en/community/releases/_meta.json @@ -1 +1 @@ -["index", "v0-3", "v0-2", "v0-1"] +["index", "v0-4", "v0-3", "v0-2", "v0-1"] diff --git a/packages/document/docs/en/community/releases/v0-4.mdx b/packages/document/docs/en/community/releases/v0-4.mdx new file mode 100644 index 0000000000..a7c1f0992e --- /dev/null +++ b/packages/document/docs/en/community/releases/v0-4.mdx @@ -0,0 +1,148 @@ +# Announcing Rsbuild v0.4 + +> February 06, 2024 + +![](https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rsbuild/Rsbuild-v0-4.png) + +Rsbuild v0.4 provides built-in support for module federation. It also contains some incompatible API updates. Please refer to the current document for upgrading. + +### Module Federation Config + +Rsbuild now provides a builtin [moduleFederation](/config/module-federation/options) option, which will make configuring Module Federation in Rsbuild much easier. + +- **Example:** + +```ts title="rsbuild.config.ts" +export default defineConfig({ + moduleFederation: { + options: { + // ModuleFederationPluginOptions + }, + }, +}); +``` + +When you use this option, Rsbuild will automatically set the default `publicPath` and `splitChunks` config, making module federation ready to use out of the box. + +> See [RFC - Provide first-class support for Module Federation](https://github.com/web-infra-dev/rsbuild/discussions/1461) for details. + +### Plugin Hook Order + +In Rsbuild plugin, you can now declare the order of hooks using the `order` field: + +```ts +const myPlugin = () => ({ + setup: (api) => { + api.modifyRsbuildConfig({ + handler: () => console.log('hello'), + order: 'pre', + }); + }, +}); +``` + +> For more details, see [Plugin Hooks](/plugins/dev/hooks). + +### Rename disableFilenameHash + +The `output.disableFilenameHash` config has been renamed to [output.filenameHash](/config/output/filename-hash). + +- Before: + +```ts +export default { + output: { + disableFilenameHash: true, + }, +}; +``` + +- After: + +```ts +export default { + output: { + filenameHash: false, + }, +}; +``` + +## Remove postcss-flexbugs-fixes + +Rsbuild v0.4 removed the builtin [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes) plugin. + +This plugin is used to fix some flex bugs for IE 10 / 11. Considering that modern browsers no longer have these flex issues, we removed this plugin to improve build performance. + +If your project needs to be compatible with IE 10 / 11 and encounters these flex issues, you can manually add this plugin in Rsbuild: + +- Install plugin: + +```bash +npm add postcss-flexbugs-fixes -D +``` + +- Register plugin in `postcss.config.cjs`: + +```js +module.exports = { + 'postcss-flexbugs-fixes': {}, +}; +``` + +## Pure React Plugin + +The React plugin has removed default [source.transformImport](/config/source/transform-import) config for [antd](https://www.npmjs.com/package/antd) v4 and [@arco-design/web-react](https://www.npmjs.com/package/@arco-design/web-react). + +Configurations related to the UI library should be provided in the UI library-specific plugins, such as `rsbuild-plugin-antd` or `rsbuild-plugin-arco`, and the React plugin will concentrate on providing fundamental abilities for React. + +- If your project is using `antd` v3 or v4, you can manually add the following config: + +```ts title="rsbuild.config.ts" +export default { + source: { + transformImport: [ + { + libraryName: 'antd', + libraryDirectory: 'es', + style: true, + }, + ], + }, +}; +``` + +- If your project is using `@arco-design/web-react`, you can manually add the following config: + +```ts title="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 + +The `loadConfig` method now returns both the contents of the config and the path to the config file: + +```js +import { loadConfig } from '@rsbuild/core'; + +// v0.3 +const config = await loadConfig(); + +// v0.4 +const { content, filePath } = await loadConfig(); +``` diff --git a/packages/document/docs/zh/community/releases/_meta.json b/packages/document/docs/zh/community/releases/_meta.json index e0c96132ad..bf3e1ec650 100644 --- a/packages/document/docs/zh/community/releases/_meta.json +++ b/packages/document/docs/zh/community/releases/_meta.json @@ -1 +1 @@ -["index", "v0-3", "v0-2", "v0-1"] +["index", "v0-4", "v0-3", "v0-2", "v0-1"] diff --git a/packages/document/docs/zh/community/releases/v0-4.mdx b/packages/document/docs/zh/community/releases/v0-4.mdx new file mode 100644 index 0000000000..b31fc7709c --- /dev/null +++ b/packages/document/docs/zh/community/releases/v0-4.mdx @@ -0,0 +1,148 @@ +# Rsbuild v0.4 发布 + +> February 06, 2024 + +![](https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rsbuild/Rsbuild-v0-4.png) + +Rsbuild v0.4 版本提供内置的模块联邦支持。此外，还包含一些 API 的不兼容更新，请参考当前文档进行升级。 + +### 模块联邦配置 + +Rsbuild 现在提供一个内置的 [moduleFederation](/config/module-federation/options) 选项，这将使得在 Rsbuild 中配置模块联邦变得更加容易。 + +- **示例：** + +```ts title="rsbuild.config.ts" +export default defineConfig({ + moduleFederation: { + options: { + // ModuleFederationPluginOptions + }, + }, +}); +``` + +当你使用该选项时，Rsbuild 会自动修改默认的 `publicPath` 和 `splitChunks` 配置，使模块联邦可以开箱即用。 + +> 详见 [RFC - Provide first-class support for Module Federation](https://github.com/web-infra-dev/rsbuild/discussions/1461)。 + +### 插件 Hook 顺序 + +在 Rsbuild 插件中使用 hook 时，现在可以通过 `order` 字段来声明 hook 的顺序： + +```ts +const myPlugin = () => ({ + setup: (api) => { + api.modifyRsbuildConfig({ + handler: () => console.log('hello'), + order: 'pre', + }); + }, +}); +``` + +> 详见 [Plugin Hooks](/plugins/dev/hooks)。 + +### 重命名 disableFilenameHash + +`output.disableFilenameHash` 配置已被重命名为 [output.filenameHash](/config/output/filename-hash)。 + +- 更改前： + +```ts +export default { + output: { + disableFilenameHash: true, + }, +}; +``` + +- 更改后： + +```ts +export default { + output: { + filenameHash: false, + }, +}; +``` + +## 移除 postcss-flexbugs-fixes + +Rsbuild v0.4 移除了内置的 [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes) 插件。 + +该插件用于修复 IE 10 / 11 中的一些 flex bug。考虑到现代浏览器已经不再存在这些 flex 问题，我们移除了这个插件以提高构建性能。 + +如果你的项目需要兼容 IE 10 / 11 ，并且遇到了这些 flex 问题，你可以在 Rsbuild 中手动添加这个插件： + +- 安装插件： + +```bash +npm add postcss-flexbugs-fixes -D +``` + +- 在 `postcss.config.cjs` 中注册插件： + +```js +module.exports = { + 'postcss-flexbugs-fixes': {}, +}; +``` + +## Pure React 插件 + +React 插件已移除对 [antd](https://www.npmjs.com/package/antd) v4 和 [@arco-design/web-react](https://www.npmjs.com/package/@arco-design/web-react) 的默认 [source.transformImport](/config/source/transform-import) 配置。 + +与组件库相关的配置应该在组件库相关的插件中提供，如 `rsbuild-plugin-antd` 或 `rsbuild-plugin-arco`，而 React 插件会专注于提供 React 基础的能力。 + +- 如果你的项目正在使用 `antd` v3 或 v4，你可以手动添加以下配置： + +```ts title="rsbuild.config.ts" +export default { + source: { + transformImport: [ + { + libraryName: 'antd', + libraryDirectory: 'es', + style: true, + }, + ], + }, +}; +``` + +- 如果你的项目正在使用 `@arco-design/web-react` v3 或 v4，你可以手动添加以下配置： + +```ts title="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` 方法现在会返回配置内容和配置文件的路径： + +```js +import { loadConfig } from '@rsbuild/core'; + +// v0.3 +const config = await loadConfig(); + +// v0.4 +const { content, filePath } = await loadConfig(); +```