You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/en/guide/solution/index.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,11 @@ In this chapter, we will introduce how to use Rslib to development libraries for
4
4
5
5
## Browser target
6
6
7
-
When developing a library that runs in the browser, you can package it in both [ESM](/guide/basic/output-format#esm--cjs) and [CJS](/guide/basic/output-format#esm--cjs) formats for integration with application bundlers. Configuring the package [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to ESM output allows for better tree shaking. Additionally, you can create [UMD](/guide/basic/output-format#umd) format output for direct browser use and even generate [Module Federation ](/guide/advanced/module-federation) formats for dynamic loading by other applications. Configure [Browserslist](https://rsbuild.dev/guide/advanced/browserslist) according to the target browser support to determine the downgrade syntax of the output, or adding[polyfill](/guide/advanced/output-compatibility) for API compatibility.
7
+
When developing a library that runs in the browser, you can package it in both [ESM](/guide/basic/output-format#esm--cjs) and [CJS](/guide/basic/output-format#esm--cjs) formats for integration with application bundlers. Configuring the package [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to ESM output allows for better tree shaking. Additionally, you can create [UMD](/guide/basic/output-format#umd) format output for direct browser use and even generate [Module Federation ](/guide/advanced/module-federation) formats for dynamic loading by other applications. Configure [Browserslist](https://rsbuild.dev/guide/advanced/browserslist) according to the target browser support to determine the downgrade syntax of the output, or add a[polyfill](/guide/advanced/output-compatibility) for API compatibility.
8
8
9
9
When publishing to npm, you can choose not to [minify](/config/rsbuild/output#outputminify) your code or to minify it while providing a [sourcemap](/config/rsbuild/output#outputsourcemap) to enhance the debugging experience for users of your library. For styling, you can use [CSS](/guide/advanced/css), or [CSS pre-processors](/guide/advanced/css#preprocessors) like Sass, Less, or Stylus, or apply [PostCSS](/guide/advanced/css#postcss) for CSS post-processing. Tools like [Tailwind CSS](/guide/advanced/css#tailwind-css) can also help in building your styles. Using [CSS modules](/guide/advanced/css#css-modules) to create CSS modules is another option.
10
10
11
-
In terms of resource management, Rslib handles [static assets](/guide/advanced/assets) used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-bundle-false), or other frameworks, using[Storybook](/guide/advanced/storybook) for UI component development and testing.
11
+
In terms of resource management, Rslib handles [static assets](/guide/advanced/assets) used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-bundle-false), or other frameworks, and use[Storybook](/guide/advanced/storybook) for UI component development and testing.
12
12
13
13
Refer to the solutions in this chapter to learn how to use Rslib to develop browser libraries for different frameworks.
Copy file name to clipboardExpand all lines: website/docs/en/guide/solution/nodejs.mdx
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,7 +25,7 @@ Rslib offers seamless support for Node.js projects, allowing you to build Node.j
25
25
26
26
For example, in `rslib.config.ts`:
27
27
28
-
```ts title="rslib.config.ts"
28
+
```ts
29
29
import { defineConfig } from'@rslib/core';
30
30
31
31
exportdefaultdefineConfig({
@@ -52,7 +52,7 @@ export default defineConfig({
52
52
53
53
## Target for Node.js
54
54
55
-
Rslib set[target](/config/rsbuild/output#outputtarget) to `"node"` by default, which is different from the default target of Rsbuild.
55
+
Rslib sets[target](/config/rsbuild/output#outputtarget) to `"node"` by default, which is different from the default target of Rsbuild.
56
56
57
57
When target is set to `"node"`, Rslib adjusts many configurations for Node.js. For example, [output.externals](/config/rsbuild/output#outputtarget) will exclude built-in Node.js modules, and [shims](/config/lib/shims) will add a shim for `import.meta.url` in CJS output by default.
58
58
@@ -62,9 +62,9 @@ All Node.js [built-in modules](https://nodejs.org/docs/latest/api/) are external
62
62
63
63
### Shims
64
64
65
-
-`global`: leave it as it is, while it's recommended to use[globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) instead.
66
-
-`__filename`: When outputting in ESM format, replace`__filename` with the result of`fileURLToPath(import.meta.url)`.
67
-
-`__dirname`: When outputting in ESM format, replace`__dirname` with the result of`dirname(fileURLToPath(import.meta.url))`.
65
+
-`global`: leave it as it is, while it's recommended to use[globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) instead.
66
+
-`__filename`: When outputting in ESM format, replace`__filename` with the result of`fileURLToPath(import.meta.url)`.
67
+
-`__dirname`: When outputting in ESM format, replace`__dirname` with the result of`dirname(fileURLToPath(import.meta.url))`.
68
68
69
69
{/* TODO: Rspack doesn't support createRequire now */}
Copy file name to clipboardExpand all lines: website/docs/en/guide/start/index.mdx
+1-3Lines changed: 1 addition & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,14 +15,12 @@ Rslib provides a comprehensive set of build features for library development, in
15
15
Rslib has the following features:
16
16
17
17
-**Easy to Configure**: Rslib aims to simplify library development by offering ready-to-use build capabilities, enabling developers to kickstart their library projects with minimal configuration.
18
-
19
18
-**Performance Oriented**: Rslib integrates high-performance Rust-based tools from the community, including [Rspack](https://rspack.dev/), [SWC](https://swc.rs/) and [Lightning CSS](https://lightningcss.dev/), to deliver first-class build speed and development experience.
20
-
21
19
-**Plugin Ecosystem**: Powered by Rsbuild, Rslib benefits from a lightweight plugin system and a collection of high-quality official plugins. Furthermore, Rsbuild's compatibility with most webpack plugins and all Rspack plugins allows library developers to seamlessly integrate existing community or in-house plugins into their library projects.
22
20
23
21
## 🎯 Ecosystem
24
22
25
-
Rslib is implemented based on Rsbuild and fully reuses the capabilities and ecology of Rsbuild.
23
+
Rslib is implemented based on Rsbuild and fully reuses the capabilities and ecosystem of Rsbuild.
26
24
27
25
The following diagram illustrates the relationship between Rslib and other tools in the ecosystem:
Copy file name to clipboardExpand all lines: website/docs/en/guide/start/quick-start.mdx
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,15 @@
2
2
3
3
## Setup environment
4
4
5
-
Before getting started, you will need to install [Node.js](https://nodejs.org/) >= version 16, it is recommended to use the Node.js LTS version.
5
+
Before getting started, you will need to install [Node.js](https://nodejs.org/) >= version 16. We recommend using the Node.js LTS version.
6
6
7
7
Check the current Node.js version with the following command:
8
8
9
9
```bash
10
10
node -v
11
11
```
12
12
13
-
If you do not have Node.js installed in current environment, or the installed version is too low, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install.
13
+
If you do not have Node.js installed in your current environment, or the installed version is too low, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install.
14
14
15
15
Here is an example of how to install via nvm:
16
16
@@ -81,7 +81,7 @@ We're working to provide templates for more frameworks (such as Vue).
81
81
```
82
82
83
83
:::tip
84
-
Biome provides similar linting and formatting features to ESLint and Prettier. If you select Biome, you typically won't need to choose ESLint or Prettier as well.
84
+
Biome provides combined linting and formatting features. If you select Biome, you typically won't need ESLint or Prettier.
85
85
:::
86
86
87
87
### Current directory
@@ -100,7 +100,7 @@ If you need to create a project in the current directory, you can set the target
100
100
101
101
### Quick creation
102
102
103
-
[create-rslib](https://www.npmjs.com/package/create-rslib) provides some CLI flags. By setting these CLI flags, you can skip the interactive selection steps and create the project with one command.
103
+
[create-rslib](https://www.npmjs.com/package/create-rslib) provides command-line options / flags. By setting these CLI flags, you can skip the interactive selection steps and create the project with one command.
104
104
105
105
For example, to create an example project in the `my-project` directory with one command:
106
106
@@ -111,7 +111,7 @@ npx create-rslib --dir my-project --template example
111
111
npx create-rslib -d my-project -t example
112
112
```
113
113
114
-
All the CLI flags of`create-rslib`:
114
+
Current flags for`create-rslib`:
115
115
116
116
```text
117
117
Usage: create-rslib [options]
@@ -127,7 +127,7 @@ Options:
127
127
128
128
## Migrate from existing projects
129
129
130
-
If you need to migrate from an existing project to Rslib, you can refer to the following guides:
130
+
To migrate from an existing project to Rslib, refer to the following guides:
131
131
132
132
-[Migrating from tsup](/guide/migration/tsup)
133
133
-[Migrating from Modern.js Module](/guide/migration/modernjs-module)
@@ -136,7 +136,7 @@ If you need to migrate from an existing project to Rslib, you can refer to the f
136
136
137
137
For other types of projects, you can manually install the [@rslib/core](https://www.npmjs.com/package/@rslib/core) package:
0 commit comments