Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Timeless0911 <[email protected]>
  • Loading branch information
SoonIter and Timeless0911 authored Dec 12, 2024
1 parent a90d78d commit cecc547
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 7 deletions.
8 changes: 4 additions & 4 deletions website/docs/zh/guide/solution/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

## Browser Target

开发在浏览器中运行的库时,可以将其打包为 [ESM](/guide/basic/output-format#esm--cjs)[CJS](/guide/basic/output-format#esm--cjs) 格式,用于与 app 的 bundler 集成。将包 [conditional-exports](https://nodejs.org/api/packages.html#conditional-exports) 配置为 ESM 输出可以更好地进行 treeshaking。此外,你可以创建 [UMD](/guide/basic/output-format#umd) 格式输出以供浏览器直接使用,甚至可以生成 [模块联邦](/guide/advanced/module-federation) 格式以供其他应用程序动态加载。根据目标浏览器支持配置 [Browserslist](https://rsbuild.dev/guide/advanced/browserslist)以确定输出的降级语法,或添加 [polyfill](/guide/advanced/output-compatibility) 用于兼容 API。
开发在浏览器中运行的库时,可以将其打包为 [ESM](/guide/basic/output-format#esm--cjs)[CJS](/guide/basic/output-format#esm--cjs) 格式,用于与 app 的 bundler 集成。将包 [conditional-exports](https://nodejs.org/api/packages.html#conditional-exports) 配置为 ESM 输出可以更好地进行 treeshaking。此外,你可以创建 [UMD](/guide/basic/output-format#umd) 格式输出以供浏览器直接使用,甚至可以生成 [模块联邦](/guide/advanced/module-federation) 格式以供其他应用程序动态加载。根据目标浏览器支持配置 [Browserslist](https://rsbuild.dev/zh/guide/advanced/browserslist)以确定输出的降级语法,或添加 [polyfill](/guide/advanced/output-compatibility) 用于兼容 API。

发布到 npm 时,你可以选择不压缩代码或[压缩代码](/config/rsbuild/output#outputminify),同时提供[sourcemap](/config/rsbuild/output#outputsourcema) 以增强库使用者的调试体验。样式上,可以使用 [CSS](/guide/advanced/css)[CSS 预处理器](/guide/advanced/css#preprocessors),如 Sass、Less 或 Stylus 等,或使用 [PostCSS](/guide/advanced/css#postcss) 用于 CSS 后处理。 [Tailwind CSS](/guide/advanced/css#tailwind-css) 等工具也可以帮助你构建样式。或使用 [CSS 模块](/guide/advanced/css#css-modules)
发布到 npm 时,你可以选择不压缩代码或[压缩代码](/config/rsbuild/output#outputminify),同时提供[sourcemap](/config/rsbuild/output#outputsourcema) 以增强库使用者的调试体验。样式上,可以使用 [CSS](/guide/advanced/css)[CSS 预处理器](/guide/advanced/css#preprocessors),如 Sass、Less 或 Stylus 等,或使用 [PostCSS](/guide/advanced/css#postcss) 用于 CSS 后处理。 [Tailwind CSS](/guide/advanced/css#tailwind-css) 等工具也可以帮助你构建样式。或使用 [CSS Modules](/guide/advanced/css#css-modules)

在资源管理方面,Rslib 处理代码中使用的[静态资源](/guide/advanced/assets),例如 SVG 和 PNG 文件。你还可以构建[React](/guide/solution/react)[Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-的组件库Bundle-false) 或其他框架,使用 [Storybook](/guide/advanced/storybook) 进行 UI 组件开发和测试。
在资源处理方面,Rslib 处理代码中使用的[静态资源](/guide/advanced/assets),例如 SVG 和 PNG 文件。你还可以构建[React](/guide/solution/react)[Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-bundle-false) 或其他框架,使用 [Storybook](/guide/advanced/storybook) 进行 UI 组件开发和测试。

参考本章的解决方案,了解如何使用 Rslib 开发一个在浏览器中使用的库,给多种框架使用。

Expand All @@ -17,7 +17,7 @@

## Node.js Target

Rslib [target](/config/rsbuild/output#outputtarget) 默认值为 `"node"` 来开发 Node.js 中使用的库。
Rslib 默认将 [target](/config/rsbuild/output#outputtarget) 设置为 `"node"`,以方便开发 Node.js 中使用的库。

你可以创建一个 [pure ESM](/guide/basic/output-format#esm--cjs) 包或者 [dual package](/guide/basic/output-format#esm--cjs) 同时按需支持 ESM 和 CJS。在 CJS 输出中,由于兼容性 `import.meta.url` 会被自动 [shimmed](/config/lib/shims),同时 `__dirname``__filename` 有可选的 ESM shims,以确保在不同的模块系统中正确使用。Node.js 中的 built-in packages 会被 [默认 externalized](/guide/advanced/third-party-deps)

Expand Down
6 changes: 3 additions & 3 deletions website/docs/zh/guide/solution/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ export default defineConfig({

React 引入了一个 [新的 JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 在版本 17 中。这个新的 transform 在使用 JSX 时无需导入 `React`

默认情况下,Rsbuild 使用新的 JSX 转换,即 `runtime: 'automatic'`。需要 React `16.14.0` 或更高版本。 `peerDependencies` 中应声明 `"react": ">=16.14.0"`
默认情况下,Rsbuild 使用新的 JSX 转换,即 `runtime: 'automatic'`。需要 React `16.14.0` 或更高版本。 `peerDependencies` 中应声明 `"react": ">=16.14.0"`

要更改 JSX transform,可以传递 [swcReactOptions](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime) 给 React plugin. 比如要使用 classic runtime 时:
要更改 JSX transform,可以传递 [swcReactOptions](https://rsbuild.dev/zh/plugins/list/plugin-react#swcreactoptionsruntime) 给 React plugin. 比如要使用 classic runtime 时:

```ts title="rslib.config.ts" {13-15}
import { pluginReact } from '@rsbuild/plugin-react';
Expand Down Expand Up @@ -109,5 +109,5 @@ export default defineConfig({

## 进一步了解

- [Rsbuild React Plugin](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime)
- [Rsbuild React Plugin](https://rsbuild.dev/zh/plugins/list/plugin-react#swcreactoptionsruntime)
- [SWC Compilation - jsc.transform.react](https://swc.rs/docs/configuration/compilation#jsctransformreact)

0 comments on commit cecc547

Please sign in to comment.