File tree Expand file tree Collapse file tree 4 files changed +15
-15
lines changed Expand file tree Collapse file tree 4 files changed +15
-15
lines changed Original file line number Diff line number Diff line change @@ -17,7 +17,7 @@ Refer to the solutions in this chapter to learn how to use Rslib to develop brow
1717
1818## Node.js Target
1919
20- By setting set [ target] ( /config/rsbuild/output#outputtarget ) to ` "node" ` to development libraries for Node.js.
20+ Rslib set [ target] ( /config/rsbuild/output#outputtarget ) to ` "node" ` by default to development libraries for Node.js.
2121
2222You can create a [ pure ESM] ( /guide/basic/output-format#esm--cjs ) package or a [ dual package] ( /guide/basic/output-format#esm--cjs ) that supports both ESM and CJS as needed. In CJS output, ` import.meta.url ` will be automatically [ shimmed] ( /config/lib/shims ) for compatibility and ` __dirname ` and ` __filename ` got optional ESM shims to ensure proper use across different module system. Node.js's built-in packages will be [ externalized by default] ( /guide/advanced/third-party-deps ) .
2323
Original file line number Diff line number Diff line change 11# 解决方案
22
3- 在本章中,我们将介绍如何使用 Rslib 开发浏览器和 Node.js 的库。我们还将介绍如何为不同的 UI 框架创建库。
3+ 在本章中,将介绍如何使用 Rslib 开发浏览器和 Node.js 的库。我们还将介绍如何为不同的 UI 框架创建库。
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 输出可以更好地进行树摇动 。此外,你可以创建 [ UMD] ( /guide/basic/output-format#umd ) 格式输出以供浏览器直接使用,甚至可以生成 [ Module Federation ] ( /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/guide/advanced/browserslist ) 以确定输出的降级语法,或添加 [ polyfill] ( /guide/advanced/output-compatibility ) 用于兼容 API 。
88
99发布到 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 ) 。
1010
1111在资源管理方面,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
13- 参考本章的解决方案,了解如何使用 Rslib 开发一个在浏览器中使用的库,并 。
13+ 参考本章的解决方案,了解如何使用 Rslib 开发一个在浏览器中使用的库,给多种框架使用 。
1414
1515{ /* TODO: Clarify default behavior */ }
1616{ /* ### Default Behavior */ }
1717
1818## Node.js Target
1919
20- 通过设置 [ 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 22
33在本文档中,你将学习如何使用 Rslib 构建 Node.js 库。
44
5- ## Create Node.js Project
5+ ## 创建 Node.js 项目
66
7- 你可以使用 ` create-rslib ` 使用 Rslib + Node.js 创建项目 。只需执行以下命令:
7+ 使用 ` create-rslib ` 创建 Rslib + Node.js 项目 。只需执行以下命令:
88
99import { PackageManagerTabs } from ' @theme' ;
1010
@@ -21,7 +21,7 @@ import { PackageManagerTabs } from '@theme';
2121
2222## 在现有项目中使用 Rslib
2323
24- Rslib 为 Node.js 项目提供无缝支持,允许你以最少的配置轻松构建 Node.js 项目。
24+ Rslib 为 Node.js 项目提供无缝支持,允许以最少的配置轻松构建 Node.js 项目。
2525
2626例如, 在 ` rsbuild.config.ts ` :
2727
@@ -50,11 +50,11 @@ export default defineConfig({
5050});
5151```
5252
53- ## Node.js 中的 target
53+ ## 用于 Node.js 的 target
5454
55- Rslib 默认将 [ target] ( /config/rsbuild/output#outputtarget ) 设置为 ` "node" ` ,这与 Rsbuild 的target 默认值不同。
55+ Rslib 中 [ target] ( /config/rsbuild/output#outputtarget ) 的默认值为 ` "node" ` ,这与 Rsbuild 的target 默认值不同。
5656
57- 当 target 为 ` "node" ` ,Rslib 会为 Node.js 调整一些配置。例如,[ output.externals] ( /config/rsbuild/output#outputtarget ) 将排除内置 Node.js 模块,而 [ shims] ( /config/lib/shims ) 将在 CJS 产物中为 ` import.meta.url ` 添加 shim。
57+ 当 target 为 ` "node" ` ,Rslib 会为 Node.js 调整一些配置。例如,[ output.externals] ( /config/rsbuild/output#outputtarget ) 将 external 内置 Node.js 模块,而 [ shims] ( /config/lib/shims ) 将在 CJS 产物中为 ` import.meta.url ` 添加 shim。
5858
5959### Externals
6060
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ import CJS from './components/CJS.mdx';
33import UMD from ' ./components/UMD.mdx' ;
44import MF from ' ./components/MF.mdx' ;
55
6- # 术语表
6+ # 名词解释
77
88## ESM
99
@@ -17,18 +17,18 @@ CJS 代表 [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modul
1717
1818<UMD />
1919
20- ## 无捆绑
20+ ## Bundleless
2121
2222Bundleless 是指一种开发方法,它避免了将多个 JavaScript /TypeScript 文件捆绑到单个或更少的输出文件中,然后再将其提供给客户端的传统做法。相反,它的目标是直接为各个模块提供服务。
2323
2424## DTS
2525
2626DTS代表[ TypeScript声明文件] ( https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html ) ,为JavaScript代码提供类型信息。
2727
28- ## 模块联盟
28+ ## 模块联邦
2929
3030<MF />
3131
3232## 更多
3333
34- 请参阅 [ Rsbuild-术语表] ( https://rsbuild.dev/guide/start/glossary ) 和 [ Rspack-术语表] ( https://rspack.dev/misc/glossary ) 中的更多术语 。
34+ 访问 [ Rsbuild-术语表] ( https://rsbuild.dev/guide/start/glossary ) 和 [ Rspack-术语表] ( https://rspack.dev/misc/glossary ) 中的更多名词解释 。
You can’t perform that action at this time.
0 commit comments