|
1 | 1 | # React |
| 2 | + |
| 3 | +在本文档中，您将学习如何使用 Rslib 构建 React 组件库。 |
| 4 | + |
| 5 | +## 创建 React 项目 |
| 6 | + |
| 7 | +你可以使用 "create-rslib" 创建 Rslib + React 项目。只需执行以下命令： |
| 8 | + |
| 9 | +import { PackageManagerTabs } from '@theme'; |
| 10 | + |
| 11 | +<PackageManagerTabs |
| 12 | + command={{ |
| 13 | + npm: 'npm create rslib@latest', |
| 14 | + yarn: 'yarn create rslib', |
| 15 | + pnpm: 'pnpm create rslib@latest', |
| 16 | + bun: 'bun create rslib@latest', |
| 17 | + }} |
| 18 | +/> |
| 19 | + |
| 20 | +然后，当提示 "Select template" 选择 `React`。 |
| 21 | + |
| 22 | +## 在现有项目中使用 Rslib |
| 23 | + |
| 24 | +开发 React 组件，需要设置 [target](/config/rsbuild/output#outputtarget) 为 `"web"` 在 `rslib.config.ts` 中。 这一点至关重要，因为 Rslib 默认将 `target` 设置为 `"node"`，这与 Rsbuild 的 target 默认值不同。 |
| 25 | + |
| 26 | +要编译 React（JSX 和 TSX），您需要注册 Rsbuild [React 插件](https://rsbuild.dev/plugins/list/plugin-react)。该插件将自动添加 React 构建所需的配置。 |
| 27 | + |
| 28 | +例如，在 `rslib.config.ts` 中注册: |
| 29 | + |
| 30 | +```ts title="rslib.config.ts" {2,8-11} |
| 31 | +import { defineConfig } from '@rslib/core'; |
| 32 | +import { pluginReact } from '@rsbuild/plugin-react'; |
| 33 | + |
| 34 | +export default defineConfig({ |
| 35 | + lib: [ |
| 36 | + // ... |
| 37 | + ], |
| 38 | + output: { |
| 39 | + target: 'web', |
| 40 | + }, |
| 41 | + plugins: [pluginReact(/** options here */)], |
| 42 | +}); |
| 43 | +``` |
| 44 | + |
| 45 | +## JSX Transform |
| 46 | + |
| 47 | +- **类型**: `'automatic' | 'classic'` |
| 48 | +- **默认值**: `'automatic'` |
| 49 | + |
| 50 | +React 引入了一个 [新的 JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 在版本 17 中。这个新的 transform 在使用 JSX 时无需导入 `React`。 |
| 51 | + |
| 52 | +默认情况下，Rsbuild 使用新的 JSX 转换，即“ `runtime: 'automatic'`。需要 React `16.14.0` 或更高版本。 `peerDependencies` 中应声明 `"react": ">=16.14.0"`。 |
| 53 | + |
| 54 | +要更改 JSX transform，可以传递 [swcReactOptions](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime) 给 React plugin. 比如要使用 classic runtime 时: |
| 55 | + |
| 56 | +```ts title="rslib.config.ts" {13-15} |
| 57 | +import { pluginReact } from '@rsbuild/plugin-react'; |
| 58 | +import { defineConfig } from '@rslib/core'; |
| 59 | + |
| 60 | +export default defineConfig({ |
| 61 | + lib: [ |
| 62 | + // ... |
| 63 | + ], |
| 64 | + output: { |
| 65 | + target: 'web', |
| 66 | + }, |
| 67 | + plugins: [ |
| 68 | + pluginReact({ |
| 69 | + swcReactOptions: { |
| 70 | + runtime: 'classic', |
| 71 | + }, |
| 72 | + }), |
| 73 | + ], |
| 74 | +}); |
| 75 | +``` |
| 76 | + |
| 77 | +## JSX Import Source |
| 78 | + |
| 79 | +- **类型**: `string` |
| 80 | +- **默认值**: `'react'` |
| 81 | + |
| 82 | +当 `runtime` 的值为 `'automatic'`，可以通过 `importSource` 指定 JSX transform 的 import 路径。 |
| 83 | + |
| 84 | +例如，当使用 [Emotion](https://emotion.sh/)，你可以设置 `importSource` 为 `'@emotion/react'`: |
| 85 | + |
| 86 | +```ts title="rslib.config.ts" {13-15} |
| 87 | +import { pluginReact } from '@rsbuild/plugin-react'; |
| 88 | +import { defineConfig } from '@rslib/core'; |
| 89 | + |
| 90 | +export default defineConfig({ |
| 91 | + lib: [ |
| 92 | + // ... |
| 93 | + ], |
| 94 | + output: { |
| 95 | + target: 'web', |
| 96 | + }, |
| 97 | + plugins: [ |
| 98 | + pluginReact({ |
| 99 | + swcReactOptions: { |
| 100 | + importSource: '@emotion/react', |
| 101 | + }, |
| 102 | + }), |
| 103 | + ], |
| 104 | +}); |
| 105 | +``` |
| 106 | + |
| 107 | +{/* TODO */} |
| 108 | +{/* ## SVGR */} |
| 109 | + |
| 110 | +## 进一步了解 |
| 111 | + |
| 112 | +- [Rsbuild React Plugin](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime) |
| 113 | +- [SWC Compilation - jsc.transform.react](https://swc.rs/docs/configuration/compilation#jsctransformreact) |
0 commit comments