diff --git a/website/docs/en/config/dev/watch-files.mdx b/website/docs/en/config/dev/watch-files.mdx index 808cd715d4..f92935a2df 100644 --- a/website/docs/en/config/dev/watch-files.mdx +++ b/website/docs/en/config/dev/watch-files.mdx @@ -15,14 +15,14 @@ type WatchFilesConfig = WatchFiles | WatchFiles[]; - **Default:** `undefined` -Watch specified files and directories for changes. When a file change is detected, it can trigger a page reload or restart the dev server. +Watch specified files and directories for changes. When a change is detected, it can trigger a page reload or restart the dev server. ## paths - **Type:** `string | string[]` - **Default:** `undefined` -Paths of the files or directories to be watched, supports glob syntax. It can be a single path or an array of multiple paths. +Paths of the files or directories to watch, supports glob syntax. It can be a single path or an array of multiple paths. - Watching a single file: @@ -69,7 +69,7 @@ Specifies whether to trigger a page reload or restart the dev server when a file ### reload-page -`reload-page` means that when a file changes, the page opened in the browser will automatically reload. If the type is not explicitly specified, Rsbuild will default to the `reload-page` behavior. +`reload-page` means that when a file changes, the page in the browser will automatically reload. If the type is not explicitly specified, Rsbuild defaults to the `reload-page` behavior. This can be used to watch changes to static assets, such as files in the `public` directory. @@ -88,9 +88,9 @@ export default { ### reload-server -`reload-server` means that the dev server will automatically restart when a file changes. This can be used to watch changes to configuration files, such as modules imported by the `rsbuild.config.ts` file. +`reload-server` means that the dev server will automatically restart when a file changes. This can be used to watch changes to configuration files, such as modules imported by your `rsbuild.config.ts` file. -For example, if you maintain some common configuration files in the `config` directory, such as `common.ts`, you want the dev server to automatically restart when these files change. Example configuration: +For example, if you maintain some common configuration files in the `config` directory, such as `common.ts`, you may want the dev server to automatically restart when these files change. Example configuration: ```ts title="rsbuild.config.ts" import { commonConfig } from './config/common'; @@ -106,7 +106,7 @@ export default { }; ``` -It should be noted that the reload-server functionality is provided by Rsbuild CLI. If you are using a custom server or an upper-layer framework based on the Rsbuild, this configuration is currently not supported. +Note that the reload-server functionality is provided by Rsbuild CLI. If you are using a custom server or a framework built on top of Rsbuild, this configuration is currently not supported. ## options @@ -130,8 +130,8 @@ export default { ## Notes -`watchFiles` is not applicable for watching build dependency files. When an Rsbuild build starts, the underlying Rspack will automatically watches all build dependencies. Any changes to these files will trigger a new build. +`watchFiles` is not applicable for watching build dependency files. When an Rsbuild build starts, the underlying Rspack automatically watches all build dependencies. Any changes to these files will trigger a new build. If you want to prevent some files from triggering a rebuild when they change, you can use Rspack's [watchOptions.ignored](https://rspack.rs/config/watch#watchoptionsignored) configuration item. -> See [HMR - File Watching](/guide/advanced/hmr#file-watching) for more details. +> See [HMR - File Watching](/guide/advanced/hmr#file-watching) for details. diff --git a/website/docs/en/config/server/open.mdx b/website/docs/en/config/server/open.mdx index f0e66ffa41..deebc32c61 100644 --- a/website/docs/en/config/server/open.mdx +++ b/website/docs/en/config/server/open.mdx @@ -15,7 +15,7 @@ type Open = - **Default:** `undefined` -`server.open` is used to configure a set of page URLs that Rsbuild will automatically open in the browser after starting the server. +`server.open` configures which page URLs Rsbuild should automatically open in the browser after starting the server. > You can also use the [--open](/guide/basic/cli#opening-page) option of Rsbuild CLI to open the pages. When using `server.open` and `--open` at the same time, `--open` takes precedence. @@ -92,7 +92,7 @@ export default { ## Specify browser -Rsbuild opens pages in the system default browser by default, and supports specifying which browser to use when starting the dev server through the `BROWSER` environment variable. +By default, Rsbuild opens pages in the system's default browser. You can specify which browser to use via the `BROWSER` environment variable. ### Browser name @@ -116,7 +116,7 @@ npm i cross-env -D cross-env BROWSER=chrome npx rsbuild dev ``` -You can also refer to the [app option](https://github.com/sindresorhus/open?tab=readme-ov-file#app) of `open` to configure more special `BROWSER` values, such as some OS-specific browser names: +You can also refer to the [app option](https://github.com/sindresorhus/open?tab=readme-ov-file#app) of `open` for additional `BROWSER` values, such as OS-specific browser names: ```bash # macOS @@ -157,7 +157,7 @@ BROWSER="Google Chrome Canary" npx rsbuild dev ### Configure environment variable -You can set the `BROWSER` environment variable in the local [.env.local](/guide/advanced/env-vars#env-file) file, so you do not need to manually set the environment variable every time you start the dev server, and it also avoids affecting other developers in the project. +You can set the `BROWSER` environment variable in your local [.env.local](/guide/advanced/env-vars#env-file) file. This eliminates the need to manually set it each time you start the dev server and prevents affecting other developers on the project. ```bash # .env.local diff --git a/website/docs/en/config/source/define.mdx b/website/docs/en/config/source/define.mdx index 92563bc8e5..deec2c1e50 100644 --- a/website/docs/en/config/source/define.mdx +++ b/website/docs/en/config/source/define.mdx @@ -3,7 +3,7 @@ - **Type:** `Record` - **Default:** `{}` -Replaces variables in your code with other values or expressions at compile time. This is useful for enabling different behavior between development and production builds. +Replaces variables in your code with other values or expressions at compile time. This enables different behavior between development and production builds. Each configuration key represents an identifier or multiple identifiers joined with `.`: diff --git a/website/docs/en/guide/advanced/env-vars.mdx b/website/docs/en/guide/advanced/env-vars.mdx index 9612dc7208..c934bd3086 100644 --- a/website/docs/en/guide/advanced/env-vars.mdx +++ b/website/docs/en/guide/advanced/env-vars.mdx @@ -1,12 +1,12 @@ # Environment variables -Rsbuild supports injecting environment variables or expressions into your code during the build, which helps distinguish the running environment or replace constants. +Rsbuild supports injecting environment variables or expressions into your code during the build. This helps distinguish between different running environments or replace constants. This chapter explains how to use environment variables in Rsbuild. ## Default variables -Rsbuild injects some environment variables into your code by default using [source.define](#using-define). These are replaced with specified values during the build: +Rsbuild injects some environment variables into your code by default using [source.define](#using-define). These are replaced with their specified values during the build: `import.meta.env` contains these environment variables: @@ -84,9 +84,9 @@ if (import.meta.env.PROD) { - **Type:** `string` - **Scope:** Available in source code, replaced at build time via [define](/guide/advanced/env-vars#using-define) -You can use `import.meta.env.BASE_URL` in the client code to access the server's [base path](/guide/basic/server#base-path), which is determined by the [server.base](/config/server/base) configuration and is helpful for referencing [public folder](/guide/basic/static-assets#public-folder) assets in the code. +You can use `import.meta.env.BASE_URL` in client code to access the server's [base path](/guide/basic/server#base-path). The base path is determined by the [server.base](/config/server/base) configuration and is useful for referencing [public folder](/guide/basic/static-assets#public-folder) assets in your code. -For example, we set the base path of the server to `/foo` through [server.base](/config/server/base) configuration: +For example, we set the server's base path to `/foo` using the [server.base](/config/server/base) configuration: ```ts export default { @@ -96,7 +96,7 @@ export default { }; ``` -Then, the access URL to the `favicon.ico` file in the public directory is `http://localhost:3000/foo/favicon.ico`. You can use `import.meta.env.BASE_URL` to concatenate the URL in JS files: +Then, the URL for the `favicon.ico` file in the public directory is `http://localhost:3000/foo/favicon.ico`. You can use `import.meta.env.BASE_URL` to construct the URL in JavaScript files: ```js title="index.js" const image = new Image(); @@ -109,13 +109,13 @@ image.src = `${import.meta.env.BASE_URL}/favicon.ico`; - **Type:** `string` - **Scope:** Available in source code, replaced at build time via [define](/guide/advanced/env-vars#using-define) -You can use `import.meta.env.ASSET_PREFIX` in the client code to access the URL prefix of static assets. +You can use `import.meta.env.ASSET_PREFIX` in client code to access the URL prefix of static assets. - In development, it is equivalent to the value set by [dev.assetPrefix](/config/dev/asset-prefix). - In production, it is equivalent to the value set by [output.assetPrefix](/config/output/asset-prefix). - Rsbuild will automatically remove the trailing slash from `assetPrefix` to make string concatenation easier. -For example, we copy the `static/icon.png` image to the `dist` directory through [output.copy](/config/output/copy) configuration: +For example, we copy the `static/icon.png` image to the `dist` directory using the [output.copy](/config/output/copy) configuration: ```ts export default { @@ -129,7 +129,7 @@ export default { }; ``` -Then we can access the image URL in the client code: +Then we can access the image URL in client code: ```jsx const Image = ; @@ -180,9 +180,9 @@ For example, in the HTML template, you can use `process.env.ASSET_PREFIX` to con - **Type:** `string` - **Scope:** Available in both Node.js process and source code -By default, Rsbuild will automatically set the `process.env.NODE_ENV` environment variable to `'development'` in development mode and `'production'` in production mode. +By default, Rsbuild sets the `process.env.NODE_ENV` environment variable to `'development'` in development mode and `'production'` in production mode. -You can use `process.env.NODE_ENV` directly in Node.js and in the client code. +You can use `process.env.NODE_ENV` directly in Node.js and in client code. ```ts if (process.env.NODE_ENV === 'development') { @@ -210,7 +210,7 @@ During code minification, `if (false) { ... }` will be recognized as invalid cod #### Custom NODE_ENV -`process.env.NODE_ENV` is injected by Rspack by default. If you need to disable the injection or custom the value, use the [optimization.nodeEnv](https://rspack.rs/config/optimization#optimizationnodeenv) option of Rspack: +`process.env.NODE_ENV` is injected by Rspack by default. To disable the injection or customize the value, use Rspack's [optimization.nodeEnv](https://rspack.rs/config/optimization#optimizationnodeenv) option: ```ts title="rsbuild.config.ts" export default { @@ -220,9 +220,9 @@ export default { }; ``` -## `.env` File +## `.env` file -When a `.env` file exists in the project root directory, Rsbuild CLI will automatically use [dotenv](https://npmjs.com/package/dotenv) to load these environment variables and add them to the current Node.js process. The [Public Variables](#public-variables) will be exposed in the client code. +When a `.env` file exists in the project root directory, Rsbuild CLI automatically uses [dotenv](https://npmjs.com/package/dotenv) to load these environment variables and add them to the current Node.js process. The [Public Variables](#public-variables) will be exposed in client code. You can access these environment variables through `import.meta.env.[name]` or `process.env.[name]`. @@ -239,7 +239,7 @@ Rsbuild supports reading the following types of env files: | `.env.development.local` | Local usage of the `.env.development` file, should be added to .gitignore. | | `.env.production.local` | Local usage of the `.env.production` file, should be added to .gitignore. | -If several of the above files exist at the same time, they will all be loaded, with the files listed at the bottom of the table having higher priority. +If multiple of the above files exist, they will all be loaded, with files listed lower in the table having higher priority. ### Env mode @@ -286,7 +286,7 @@ FOO=hello BAR=1 ``` -Then in the `rsbuild.config.ts` file, you can access the above environment variables using `import.meta.env.[name]` or `process.env.[name]`: +Then in the `rsbuild.config.ts` file, you can access the environment variables using `import.meta.env.[name]` or `process.env.[name]`: ```ts title="rsbuild.config.ts" console.log(import.meta.env.FOO); // 'hello' @@ -311,7 +311,7 @@ console.log(process.env.BAR); // '2' ### Manually load env -If you are not using the Rsbuild CLI and are using the Rsbuild [JavaScript API](/api/start/index) instead, you will need to manually call the [loadEnv](/api/javascript-api/core#loadenv) method to read environment variables and inject them into the code via the [source.define](/config/source/define) config. +If you are not using the Rsbuild CLI and are using the [JavaScript API](/api/start/index) instead, you will need to manually call the [loadEnv](/api/javascript-api/core#loadenv) method to read environment variables and inject them via the [source.define](/config/source/define) config. ```ts import { loadEnv, mergeRsbuildConfig } from '@rsbuild/core'; @@ -337,7 +337,7 @@ You can disable loading `.env` files by using the `--no-env` flag in the CLI. npx rsbuild dev --no-env ``` -When using the `--no-env` flag, Rsbuild CLI will not read any `.env` files, and you can manage environment variables using other tools like [dotenvx](https://dotenvx.com/). +When using the `--no-env` flag, Rsbuild CLI will not read any `.env` files. You can then manage environment variables using other tools like [dotenvx](https://dotenvx.com/). ## Public variables @@ -348,7 +348,7 @@ PUBLIC_NAME=jack PASSWORD=123 ``` -In the client code, you can access these environment variables through `import.meta.env.PUBLIC_*` or `process.env.PUBLIC_*`. Rsbuild will match the identifiers and replace them with the corresponding values. +In client code, you can access these environment variables through `import.meta.env.PUBLIC_*` or `process.env.PUBLIC_*`. Rsbuild will match the identifiers and replace them with their corresponding values. ```ts title="src/index.ts" console.log(import.meta.env.PUBLIC_NAME); // -> 'jack' @@ -367,9 +367,9 @@ console.log(process.env.PASSWORD); // -> undefined ### Replacement scope -Public variables will replace identifiers in the client code, with the replacement scope including: +Public variables will replace identifiers in client code. The replacement scope includes: -- JavaScript files, and files that can be converted into JavaScript code, such as `.js`, `.ts`, `.tsx`, etc. +- JavaScript files and files that can be converted to JavaScript code, such as `.js`, `.ts`, `.tsx`, etc. - HTML template files, for example: ```xml title="template.html" @@ -400,15 +400,15 @@ export default defineConfig({ ## Using define -By using [source.define](/config/source/define), you can replace global identifiers with some expressions or values in compile time. +By using [source.define](/config/source/define), you can replace global identifiers with expressions or values at compile time. -`define` is similar to the macro definition capabilities provided by other languages. It is often used to inject environment variables and other information to the code during build time. +`define` is similar to macro definition capabilities in other languages. It is often used to inject environment variables and other information into code during build time. ### Replace identifiers -The most basic use case for `define` is to replace global identifiers in compile time. +The most basic use case for `define` is to replace global identifiers at compile time. -The value of the environment variable `NODE_ENV` will change the behavior of many vendor packages. Usually, we need to set it to `production`. +The value of the environment variable `NODE_ENV` affects the behavior of many vendor packages. Usually, we need to set it to `production`. ```js export default { @@ -422,19 +422,19 @@ export default { Note that the value provided here must be a JSON string, e.g. `process.env.NODE_ENV` with a value of `"production"` should be passed in as `"\"production\""` to be processed correctly. -Similarly `{ foo: "bar" }` should be converted to `"{\"foo\":\"bar\"}"`, which if passed directly into the original object would mean replacing the identifier `process.env.NODE_ENV.foo` with the identifier `bar`. +Similarly, `{ foo: "bar" }` should be converted to `"{\"foo\":\"bar\"}"`. If you pass the object directly, it means replacing the identifier `process.env.NODE_ENV.foo` with the identifier `bar`. -For more about `source.define`, just refer to [API References](/config/source/define). +For more about `source.define`, refer to the [API References](/config/source/define). :::tip -The environment variable `NODE_ENV` shown in the example above is already injected by the Rsbuild, and you usually do not need to configure it manually. +The `NODE_ENV` environment variable shown in the example above is already injected by Rsbuild, so you usually don't need to configure it manually. ::: -### Identifiers matching +### Identifier matching Note that `source.define` can only match complete global identifiers. You can think of it as a text replacement process. -If the identifier in the code does not exactly match the key defined in `define`, Rsbuild will not be able to replace it. +If the identifier in the code doesn't exactly match the key defined in `define`, Rsbuild will not replace it. ```js // Good @@ -457,7 +457,7 @@ console.log(env.NODE_ENV); // process is not defined! ### process.env Replacement -When using `source.define`, please avoid replacing the entire `process.env` object, e.g., the following usage is not recommended: +When using `source.define`, avoid replacing the entire `process.env` object. For example, the following usage is not recommended: ```js export default { @@ -469,20 +469,20 @@ export default { }; ``` -If the above usage is adopted, the following problems will be caused: +If you use the above approach, it will cause the following problems: -1. Some unused environment variables are additionally injected, causing the environment variables of the dev server to be leaked into the front-end code. -2. As each `process.env` code will be replaced by a complete environment variable object, the bundle size of the front-end code will increase and the performance will decrease. +1. Some unused environment variables are additionally injected, causing the dev server's environment variables to leak into the frontend code. +2. Each `process.env` reference will be replaced by a complete environment variable object, increasing bundle size and decreasing performance. -Therefore, please inject the environment variables on `process.env` according to actual needs and avoid replacing them in its entirety. +Therefore, inject environment variables on `process.env` according to actual needs and avoid replacing it entirely. ## Type declarations ### Public variables -When you access a public environment variable in a TypeScript file, TypeScript may prompt that the variable lacks a type definition, and you need to add the corresponding type declaration. +When you access a public environment variable in a TypeScript file, TypeScript may report that the variable lacks a type definition. You'll need to add the corresponding type declaration. -For example, if you reference a `PUBLIC_FOO` variable, the following prompt will appear in the TypeScript file: +For example, if you reference a `PUBLIC_FOO` variable, TypeScript will display the following error: ``` TS2304: Cannot find name 'PUBLIC_FOO'. @@ -515,9 +515,9 @@ interface ImportMeta { } ``` -By default, Rsbuild's preset types allow you to access any property on `import.meta.env` without causing TypeScript type errors. +By default, Rsbuild's preset types allow you to access any property on `import.meta.env` without TypeScript type errors. -For stricter type safety, you can enable the `strictImportMetaEnv` option by extending the `RsbuildTypeOptions` interface. When this option is enabled, only properties predefined by Rsbuild or explicitly declared in your project can be accessed. Accessing any other property will result in a TypeScript type error. +For stricter type safety, you can enable the `strictImportMetaEnv` option by extending the `RsbuildTypeOptions` interface. When this option is enabled, only properties predefined by Rsbuild or explicitly declared in your project can be accessed. Accessing any other property will cause a TypeScript type error. You can add the following code to your `src/env.d.ts` file: @@ -550,9 +550,9 @@ declare namespace NodeJS { ## Tree shaking -`define` can also be used to mark dead code to assist the Rspack with tree shaking optimization. +`define` can also mark dead code to assist Rspack with tree shaking optimization. -Build artifacts for different languages is achieved by replacing `import.meta.env.LANGUAGE` with a specific value, for example. +Build different artifacts for different languages by replacing `import.meta.env.LANGUAGE` with a specific value. For example: ```ts title="rsbuild.config.ts" export default { @@ -576,7 +576,7 @@ const App = () => { }; ``` -Specifying the environment variable `LANGUAGE=zh` and then running build will eliminate the dead code. +Specifying the environment variable `LANGUAGE=zh` and then running build will eliminate the dead code: ```js const App = () => { @@ -587,4 +587,4 @@ const App = () => { }; ``` -Unused components will not be bundled, and their dependencies will be removed accordingly, resulting in smaller build outputs. +Unused components will not be bundled, and their dependencies will be removed accordingly, resulting in a smaller build output. diff --git a/website/docs/en/guide/advanced/hmr.mdx b/website/docs/en/guide/advanced/hmr.mdx index 1d29c2044d..225df558e9 100644 --- a/website/docs/en/guide/advanced/hmr.mdx +++ b/website/docs/en/guide/advanced/hmr.mdx @@ -50,7 +50,7 @@ export default { ## File watching -By default, Rsbuild does not watch files in the `.git/` and `node_modules/` directories. When files in these directories changed, Rsbuild will not trigger a rebuild. This helps to reduce memory usage and improve build performance. +By default, Rsbuild does not watch files in the `.git/` and `node_modules/` directories. When files in these directories change, Rsbuild will not trigger a rebuild. This reduces memory usage and improves build performance. If you want to watch these directories, you can manually configure Rspack's [watchOptions.ignored](https://rspack.rs/config/watch#watchoptionsignored) to override the default behavior. @@ -70,4 +70,4 @@ export default { ## FAQ -Please refer to [HMR FAQ](/guide/faq/hmr). +Refer to [HMR FAQ](/guide/faq/hmr). diff --git a/website/docs/en/guide/basic/server.mdx b/website/docs/en/guide/basic/server.mdx index dd240f39dc..b73bed51fd 100644 --- a/website/docs/en/guide/basic/server.mdx +++ b/website/docs/en/guide/basic/server.mdx @@ -4,9 +4,9 @@ Rsbuild includes a built-in dev server designed to improve the development exper ## Base path -By default, the Rsbuild server's base path is `/`. Access output files like `index.html` and [public folder](/guide/basic/static-assets#public-folder) assets at `http://localhost:3000/`. +By default, the Rsbuild server's base path is `/`. You can access output files like `index.html` and [public folder](/guide/basic/static-assets#public-folder) assets at `http://localhost:3000/`. -Modify the server's base path using [server.base](/config/server/base). To access files at `http://localhost:3000/foo/`, configure as follows: +You can modify the server's base path using [server.base](/config/server/base). For example, to access files at `http://localhost:3000/foo/`, configure it as follows: ```ts title="rsbuild.config.ts" export default { @@ -18,7 +18,7 @@ export default { ## View static assets -After starting the dev server, access `/rsbuild-dev-server` to view all static assets generated during the current build. +After starting the dev server, you can access `/rsbuild-dev-server` to view all static assets generated during the current build. For example, open `http://localhost:3000/rsbuild-dev-server` in your browser: @@ -36,9 +36,9 @@ The Rsbuild server provides default routing conventions and allows customization The Rsbuild server generates page routes based on the [server.base](/config/server/base) and [source.entry](/config/source/entry) configurations. -When the entry is `index`, the page can be accessed via `/`; when the entry is `foo`, the page can be accessed via `/foo`. +When the entry is `index`, the page can be accessed at `/`. When the entry is `foo`, the page can be accessed at `/foo`. -When `server.base` is `/base`, the index page can be accessed via `/base` and the foo page via `/base/foo`. +When `server.base` is `/base`, the index page can be accessed at `/base` and the foo page at `/base/foo`. ```ts title="rsbuild.config.ts" export default { @@ -112,23 +112,23 @@ export default { ## Rspack dev server -Rsbuild has a built-in lightweight dev server that differs from the dev servers built into Rspack CLI or webpack CLI. There are some differences between them, including different configuration options. +Rsbuild has a built-in lightweight dev server that differs from the dev servers in Rspack CLI or webpack CLI. There are several differences between them, including different configuration options. ### Comparison -Compared to the dev server built into Rspack CLI, Rsbuild's dev server has the following differences: +Compared to the dev server in Rspack CLI, Rsbuild's dev server has the following differences: - **Configuration**: Rsbuild provides richer server configuration options. -- **Log Format**: The log format of Rspack CLI is basically consistent with webpack CLI, while Rsbuild's logs are clearer and more readable. +- **Log Format**: The log format of Rspack CLI is largely consistent with webpack CLI, while Rsbuild's logs are clearer and more readable. - **Dependencies**: Rsbuild is built on lightweight libraries like `connect`, which has fewer dependencies and faster startup speed compared to `express` used by `@rspack/dev-server`. ### Configuration -Rsbuild does not support using Rspack's [devServer](https://rspack.rs/config/dev-server) config. Instead, you can use Rsbuild's `dev` and `server` configs. +Rsbuild does not support using Rspack's [devServer](https://rspack.rs/config/dev-server) config. Instead, use Rsbuild's `dev` and `server` configs. -In Rsbuild, `dev` contains configurations that only work in development mode, while the `server` config works for both dev and preview servers. +In Rsbuild, the `dev` config contains settings that only apply in development mode, while the `server` config applies to both dev and preview servers. -Below are the Rsbuild configuration options that correspond to the Rspack CLI's `devServer` config: +Below are the Rsbuild configuration options that correspond to Rspack CLI's `devServer` config: | Rspack CLI | Rsbuild | | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | @@ -147,7 +147,7 @@ Below are the Rsbuild configuration options that correspond to the Rspack CLI's | [devServer.static](https://rspack.rs/config/dev-server#devserverstatic) | [server.publicDir](/config/server/public-dir) | | [devServer.watchFiles](https://rspack.rs/config/dev-server#devserverwatchfiles) | [dev.watchFiles](/config/dev/watch-files) | -> For more configurations, please refer to [Config Overview](/config/index). +> For more configurations, refer to [Config Overview](/config/index). ## Middleware @@ -197,9 +197,9 @@ server.middlewares.use((req, res, next) => { ### Integrate third-party server frameworks -When migrating from other server frameworks (such as Express), the original middleware may not be used directly in Rsbuild. For example, the `req.params`, `req.path`, `req.search`, `req.query` and other properties provided by Express cannot be accessed in the Rsbuild middleware. +When migrating from other server frameworks (such as Express), the original middleware may not work directly in Rsbuild. For example, properties like `req.params`, `req.path`, `req.search`, and `req.query` provided by Express are not accessible in Rsbuild middleware. -If you need to reuse existing middleware in Rsbuild, you can use the following method to introduce the server application as a whole as middleware: +If you need to reuse existing middleware in Rsbuild, you can use the following approach to integrate the entire server application as middleware: ```ts title="rsbuild.config.ts" import express from 'express'; @@ -221,6 +221,6 @@ export default { ## Custom server -If you want to integrate Rsbuild dev server into a custom server, you can get the instance methods of Rsbuild dev server through the `createDevServer` method of Rsbuild and call them on demand. +If you want to integrate Rsbuild's dev server into a custom server, you can use the `createDevServer` method to get the Rsbuild dev server instance and call its methods as needed. -For details, please refer to [Rsbuild - createDevServer](/api/javascript-api/instance#rsbuildcreatedevserver). +For details, refer to [Rsbuild - createDevServer](/api/javascript-api/instance#rsbuildcreatedevserver). diff --git a/website/docs/en/guide/basic/static-assets.mdx b/website/docs/en/guide/basic/static-assets.mdx index ddaf0784a9..6977e187b8 100644 --- a/website/docs/en/guide/basic/static-assets.mdx +++ b/website/docs/en/guide/basic/static-assets.mdx @@ -3,7 +3,7 @@ Rsbuild supports importing static assets, including images, fonts, audio, and video. :::tip What are static assets -Static assets are files that are part of a web application and don't change during use. Examples include images, fonts, media files, stylesheets, and JavaScript files. These assets are typically stored on a web server or CDN and delivered to the user's browser when accessing the application. Since they don't change, static assets can be cached by the browser, improving application performance. +Static assets are files that are part of a web application and don't change during use. Examples include images, fonts, media files, stylesheets, and JavaScript files. These assets are typically stored on a web server or CDN and delivered to the user's browser when they access the application. Since they don't change, static assets can be cached by the browser, improving application performance. ::: ## Asset formats @@ -101,7 +101,7 @@ If you want to reference static assets with absolute paths in CSS files: } ``` -By default, the built-in `css-loader` in Rsbuild will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/tools/css-loader#toolscssloader) to filter out the specified paths. The filtered paths will be left as-is in the code. +By default, Rsbuild's built-in `css-loader` will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/tools/css-loader#toolscssloader) to filter out specific paths. Filtered paths will remain unchanged in the code. ```ts export default { @@ -135,7 +135,7 @@ console.log(largeImage); // "/static/largeImage.[hash].png" console.log(smallImage); // "data:image/png;base64,iVBORw0KGgo..." ``` -Adding the `?url` query parameter ensures that the asset is always loaded as a separate file and returns a URL: +Adding the `?url` query parameter ensures the asset is always loaded as a separate file and returns a URL: ```js import image from './static/image.png?url'; @@ -143,7 +143,7 @@ import image from './static/image.png?url'; console.log(image); // "/static/image.[hash].png" ``` -Adding the `?inline` query parameter ensures that the asset is always inlined in the code, regardless of the file size: +Adding the `?inline` query parameter ensures the asset is always inlined in the code, regardless of file size: ```js import image from './static/image.png?inline'; @@ -151,7 +151,7 @@ import image from './static/image.png?inline'; console.log(image); // "data:image/png;base64,iVBORw0KGgo..." ``` -For a more detailed introduction to asset inlining, please refer to the [Static Asset Inlining](/guide/optimization/inline-assets) section. +For a more detailed introduction to asset inlining, refer to the [Static Asset Inlining](/guide/optimization/inline-assets) section. ## Importing as string @@ -190,7 +190,7 @@ When static assets are imported, they will be output to the dist directory. You - Use [output.filename](/config/output/filename) to modify the output filename. - Use [output.distPath](/config/output/dist-path) to modify the output path. -Please read [Output Files](/guide/basic/output-files) for details. +Read [Output Files](/guide/basic/output-files) for details. ## URL prefix diff --git a/website/docs/en/guide/faq/general.mdx b/website/docs/en/guide/faq/general.mdx index e55065c6e3..7c67340698 100644 --- a/website/docs/en/guide/faq/general.mdx +++ b/website/docs/en/guide/faq/general.mdx @@ -2,30 +2,30 @@ ### What is the relationship between Rsbuild and Rspack? -Rspack is the base bundler for Rsbuild. The goal of Rsbuild is to provide out-of-the-box building capabilities for Rspack users, allowing developers to start a web project with zero configuration. +Rspack is the base bundler for Rsbuild. The goal of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration. The main differences between Rspack and Rsbuild are: - Rspack projects need to be configured from scratch, while Rsbuild provides default best practice configurations and supports extending Rspack configurations. - Rspack projects require integration with loaders and plugins from the community to support different scenarios, while Rsbuild provides official plugins and default support for common frontend frameworks and build capabilities. -- The capabilities of Rspack CLI are comparable to webpack CLI, with relatively streamlined functionality, while Rsbuild provides a more powerful CLI and a more complete dev server. +- The capabilities of Rspack CLI are comparable to webpack CLI, with relatively streamlined functionality, while Rsbuild provides a more powerful CLI and more complete dev server. --- ### Can Rsbuild be used to build libraries or UI components? -Rsbuild is out-of-the-box for building web applications. +Rsbuild is designed for building web applications out of the box. -For libraries and UI components, it is recommended to use [Rslib](https://github.com/web-infra-dev/rslib), which is a library development tool based on Rsbuild, and can reuse the configuration and plugins of Rsbuild. +For libraries and UI components, we recommend using [Rslib](https://github.com/web-infra-dev/rslib), which is a library development tool based on Rsbuild and can reuse Rsbuild's configuration and plugins. --- ### What is the relationship between Rsbuild and Modern.js? -Modern.js is a progressive web development framework built on top of Rsbuild. The building capabilities of Modern.js are based on Rsbuild. +Modern.js is a progressive web development framework built on top of Rsbuild. Modern.js's build capabilities are powered by Rsbuild. The main differences between Modern.js and Rsbuild are: - Modern.js is based on React, while Rsbuild is not coupled with any frontend UI framework. -- Modern.js is a full-stack solution, providing runtime and server-side capabilities, while Rsbuild is a build tool with other capabilities extendable through plugins. +- Modern.js is a full-stack solution, providing runtime and server-side capabilities, while Rsbuild is a build tool with other capabilities extendable via plugins. - Modern.js has more built-in features, while Rsbuild pursues lightweight and flexibility. diff --git a/website/docs/en/guide/start/index.mdx b/website/docs/en/guide/start/index.mdx index 0704af0184..f7b2fbb2ab 100644 --- a/website/docs/en/guide/start/index.mdx +++ b/website/docs/en/guide/start/index.mdx @@ -1,12 +1,12 @@ # Introduction -Rsbuild is a high-performance build tool powered by Rspack. It provides thoughtfully designed default build configurations for an out-of-the-box development experience that fully unleashes Rspack's performance advantages. +Rsbuild is a high-performance build tool powered by Rspack. It provides a thoughtfully designed default build configuration for an out-of-the-box development experience that fully unleashes Rspack's performance advantages. -Rsbuild provides [rich build features](/guide/start/features), including compilation of TypeScript, JSX, Sass, Less, CSS Modules, Wasm, and more. It also supports Module Federation, image compression, type checking, PostCSS, Lightning CSS, and additional features. +Rsbuild provides [rich build features](/guide/start/features), including compilation of TypeScript, JSX, Sass, Less, CSS Modules, and Wasm. It also supports Module Federation, image compression, type checking, PostCSS, Lightning CSS, and more. ## 🚀 Performance -Powered by Rspack's Rust-based architecture, Rsbuild delivers blazing fast performance that will reshape your development workflow. +Powered by Rspack's Rust-based architecture, Rsbuild delivers blazing-fast performance that will reshape your development workflow. ⚡️ **Build 1000 React components:** @@ -18,7 +18,7 @@ import { BenchmarkGraph } from '@components/Benchmark'; ## 💡 Comparisons -Rsbuild is a build tool on par with [Vite](https://vitejs.dev/), [Create React App](https://github.com/facebook/create-react-app), and [Vue CLI](https://github.com/vuejs/vue-cli). All come with built-in dev servers, command line tools, and sensible build configurations for an out-of-the-box experience. +Rsbuild is a build tool on par with [Vite](https://vitejs.dev/), [Create React App](https://github.com/facebook/create-react-app), and [Vue CLI](https://github.com/vuejs/vue-cli). All provide built-in dev servers, command line tools, and sensible build configurations for an out-of-the-box experience. ![](https://assets.rspack.rs/rsbuild/assets/rsbuild-1-0-build-tools.png) @@ -26,7 +26,7 @@ Rsbuild is a build tool on par with [Vite](https://vitejs.dev/), [Create React A You can think of Rsbuild as a modernized version of Create React App or Vue CLI, with these key differences: -- The underlying bundler switched from webpack to Rspack, delivering 5 to 10 times better build performance. +- The underlying bundler has switched from webpack to Rspack, delivering 5 to 10 times better build performance. - It's decoupled from frontend UI frameworks and supports all UI frameworks via [plugins](/plugins/list/index), including React, Vue, Svelte, Solid, and more. - It provides better extensibility. You can extend Rsbuild flexibly through [Configurations](/config/index), [Plugin API](/plugins/dev/index), and [JavaScript API](/api/start/index). @@ -34,7 +34,7 @@ You can think of Rsbuild as a modernized version of Create React App or Vue CLI, Rsbuild shares many similarities with Vite, as both aim to improve the frontend development experience. The main differences are: -- **Production consistency**: Rsbuild uses Rspack for bundling in both development and production builds, ensuring high consistency between development and production outputs. Vite uses ESM for module loading during development, improving startup speed but potentially causing inconsistencies between development and production outputs. +- **Production consistency**: Rsbuild uses Rspack for bundling in both development and production, ensuring high consistency between development and production outputs. Vite uses ESM for module loading during development, improving startup speed but potentially causing inconsistencies between development and production. - **Ecosystem compatibility**: Rsbuild is compatible with most webpack plugins and all Rspack plugins, while Vite is compatible with Rollup plugins. If you're currently using many plugins and loaders from the webpack ecosystem, migrating to Rsbuild is relatively straightforward. - **Module Federation**: The Rsbuild team works closely with the [Module Federation](/guide/advanced/module-federation) development team, providing first-class support for Module Federation to help you develop large web applications with micro frontend architecture. @@ -42,13 +42,13 @@ Rsbuild shares many similarities with Vite, as both aim to improve the frontend Rsbuild has the following features: -- **Easy to Configure**: One of Rsbuild's goals is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start web projects with zero configuration. Additionally, Rsbuild provides semantic build configuration to reduce the learning curve for Rspack configuration. +- **Easy to Configure**: One of Rsbuild's goals is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration. Additionally, Rsbuild provides semantic build configuration to reduce the learning curve for Rspack configuration. -- **Performance Oriented**: Rsbuild integrates high-performance Rust-based tools from the community, including [Rspack](https://rspack.rs), [SWC](https://swc.rs/) and [Lightning CSS](https://lightningcss.dev/), delivering first-class build speed and development experience. +- **Performance Oriented**: Rsbuild integrates high-performance Rust-based tools from the community, including [Rspack](https://rspack.rs), [SWC](https://swc.rs/), and [Lightning CSS](https://lightningcss.dev/), delivering first-class build speed and development experience. - **Plugin Ecosystem**: Rsbuild has a lightweight plugin system and includes a range of high-quality official plugins. Furthermore, Rsbuild is compatible with most webpack plugins and all Rspack plugins, allowing users to leverage existing community or in-house plugins in Rsbuild without rewriting code. -- **Stable Artifacts**: Rsbuild focuses strongly on build artifact stability. It ensures high consistency between artifacts in development and production builds, and automatically handles syntax downgrading and polyfill injection. Rsbuild also provides plugins for type checking and artifact syntax validation to prevent quality and compatibility issues in production code. +- **Stable Artifacts**: Rsbuild focuses strongly on build artifact stability. It ensures high consistency between artifacts in development and production, and automatically handles syntax downgrading and polyfill injection. Rsbuild also provides plugins for type checking and artifact syntax validation to prevent quality and compatibility issues in production code. - **Framework Agnostic**: Rsbuild is not coupled to any frontend UI framework. It supports frameworks like React, Vue, Svelte, Solid, and Preact through plugins, with plans to support more UI frameworks from the community in the future.