File tree Expand file tree Collapse file tree 2 files changed +7
-7
lines changed
website/docs/zh/guide/solution Expand file tree Collapse file tree 2 files changed +7
-7
lines changed Original file line number Diff line number Diff line change 44
55## Browser Target
66
7- 开发在浏览器中运行的库时,可以将其打包为 [ 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。
7+ 开发在浏览器中运行的库时,可以将其打包为 [ 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。
88
9- 发布到 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 ) 。
9+ 发布到 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 ) 。
1010
11- 在资源管理方面 ,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 组件开发和测试。
11+ 在资源处理方面 ,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 组件开发和测试。
1212
1313参考本章的解决方案,了解如何使用 Rslib 开发一个在浏览器中使用的库,给多种框架使用。
1414
1717
1818## Node.js Target
1919
20- Rslib [ target] ( /config/rsbuild/output#outputtarget ) 默认值为 ` "node" ` 来开发 Node.js 中使用的库。
20+ Rslib 默认将 [ target] ( /config/rsbuild/output#outputtarget ) 设置为 ` "node" ` ,以方便开发 Node.js 中使用的库。
2121
2222你可以创建一个 [ 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 ) 。
2323
Original file line number Diff line number Diff line change @@ -49,9 +49,9 @@ export default defineConfig({
4949
5050React 引入了一个 [ 新的 JSX transform] ( https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html ) 在版本 17 中。这个新的 transform 在使用 JSX 时无需导入 ` React ` 。
5151
52- 默认情况下,Rsbuild 使用新的 JSX 转换,即“ ` runtime: 'automatic' ` 。需要 React ` 16.14.0 ` 或更高版本。 ` peerDependencies ` 中应声明 ` "react": ">=16.14.0" ` 。
52+ 默认情况下,Rsbuild 使用新的 JSX 转换,即 ` runtime: 'automatic' ` 。需要 React ` 16.14.0 ` 或更高版本。 ` peerDependencies ` 中应声明 ` "react": ">=16.14.0" ` 。
5353
54- 要更改 JSX transform,可以传递 [ swcReactOptions] ( https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime ) 给 React plugin. 比如要使用 classic runtime 时:
54+ 要更改 JSX transform,可以传递 [ swcReactOptions] ( https://rsbuild.dev/zh/ plugins/list/plugin-react#swcreactoptionsruntime ) 给 React plugin. 比如要使用 classic runtime 时:
5555
5656``` ts title="rslib.config.ts" {13-15}
5757import { pluginReact } from ' @rsbuild/plugin-react' ;
@@ -109,5 +109,5 @@ export default defineConfig({
109109
110110## 进一步了解
111111
112- - [ Rsbuild React Plugin] ( https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime )
112+ - [ Rsbuild React Plugin] ( https://rsbuild.dev/zh/ plugins/list/plugin-react#swcreactoptionsruntime )
113113- [ SWC Compilation - jsc.transform.react] ( https://swc.rs/docs/configuration/compilation#jsctransformreact )
You can’t perform that action at this time.
0 commit comments