Skip to content

Commit

Permalink
chore: fix
Browse files Browse the repository at this point in the history
  • Loading branch information
SoonIter committed Dec 12, 2024
1 parent c2463a4 commit eb2b769
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 15 deletions.
2 changes: 1 addition & 1 deletion website/docs/en/guide/solution/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Refer to the solutions in this chapter to learn how to use Rslib to develop brow

## Node.js Target

By setting set [target](/config/rsbuild/output#outputtarget) to `"node"` to development libraries for Node.js.
Rslib set [target](/config/rsbuild/output#outputtarget) to `"node"` by default to development libraries for Node.js.

You 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).

Expand Down
8 changes: 4 additions & 4 deletions website/docs/zh/guide/solution/index.mdx
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
# 解决方案

在本章中,我们将介绍如何使用 Rslib 开发浏览器和 Node.js 的库。我们还将介绍如何为不同的 UI 框架创建库。
在本章中,将介绍如何使用 Rslib 开发浏览器和 Node.js 的库。我们还将介绍如何为不同的 UI 框架创建库。

## 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 输出可以更好地进行树摇动。此外,你可以创建 [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 兼容性
开发在浏览器中运行的库时,可以将其打包为 [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

发布到 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)

在资源管理方面,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 开发一个在浏览器中使用的库,
参考本章的解决方案,了解如何使用 Rslib 开发一个在浏览器中使用的库,给多种框架使用

{/* TODO: Clarify default behavior */}
{/* ### Default Behavior */}

## Node.js Target

通过设置 [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
12 changes: 6 additions & 6 deletions website/docs/zh/guide/solution/nodejs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

在本文档中,你将学习如何使用 Rslib 构建 Node.js 库。

## Create Node.js Project
## 创建 Node.js 项目

你可以使用 `create-rslib` 使用 Rslib + Node.js 创建项目。只需执行以下命令:
使用 `create-rslib` 创建 Rslib + Node.js 项目。只需执行以下命令:

import { PackageManagerTabs } from '@theme';

Expand All @@ -21,7 +21,7 @@ import { PackageManagerTabs } from '@theme';

## 在现有项目中使用 Rslib

Rslib 为 Node.js 项目提供无缝支持,允许你以最少的配置轻松构建 Node.js 项目。
Rslib 为 Node.js 项目提供无缝支持,允许以最少的配置轻松构建 Node.js 项目。

例如, 在 `rsbuild.config.ts`:

Expand Down Expand Up @@ -50,11 +50,11 @@ export default defineConfig({
});
```

## Node.js 中的 target
## 用于 Node.js target

Rslib 默认将 [target](/config/rsbuild/output#outputtarget) 设置为 `"node"`,这与 Rsbuild 的target 默认值不同。
Rslib [target](/config/rsbuild/output#outputtarget) 的默认值为 `"node"`,这与 Rsbuild 的target 默认值不同。

当 target 为 `"node"`,Rslib 会为 Node.js 调整一些配置。例如,[output.externals](/config/rsbuild/output#outputtarget) 将排除内置 Node.js 模块,而 [shims](/config/lib/shims) 将在 CJS 产物中为 `import.meta.url` 添加 shim。
当 target 为 `"node"`,Rslib 会为 Node.js 调整一些配置。例如,[output.externals](/config/rsbuild/output#outputtarget) 将 external 内置 Node.js 模块,而 [shims](/config/lib/shims) 将在 CJS 产物中为 `import.meta.url` 添加 shim。

### Externals

Expand Down
8 changes: 4 additions & 4 deletions website/docs/zh/guide/start/glossary.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import CJS from './components/CJS.mdx';
import UMD from './components/UMD.mdx';
import MF from './components/MF.mdx';

# 术语表
# 名词解释

## ESM

Expand All @@ -17,18 +17,18 @@ CJS 代表 [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modul

<UMD />

## 无捆绑
## Bundleless

Bundleless 是指一种开发方法,它避免了将多个 JavaScript /TypeScript 文件捆绑到单个或更少的输出文件中,然后再将其提供给客户端的传统做法。相反,它的目标是直接为各个模块提供服务。

## DTS

DTS代表[TypeScript声明文件](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html),为JavaScript代码提供类型信息。

## 模块联盟
## 模块联邦

<MF />

## 更多

请参阅 [Rsbuild-术语表](https://rsbuild.dev/guide/start/glossary)[Rspack-术语表](https://rspack.dev/misc/glossary) 中的更多术语
访问 [Rsbuild-术语表](https://rsbuild.dev/guide/start/glossary)[Rspack-术语表](https://rspack.dev/misc/glossary) 中的更多名词解释

0 comments on commit eb2b769

Please sign in to comment.