CLI
Rslib comes with a lightweight CLI that includes commands such as rslib build and rslib inspect.
rslib -h
To view all available CLI commands, run the following command in the project directory:
The output is shown below:
Usage: rslib <command> [options]
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
build [options] build the library for production
inspect [options] inspect the Rsbuild / Rspack configs of Rslib projects
mf [options] <dev> start Rsbuild dev server of Module Federation format
help [command] display help for command
rslib build
The rslib build
command will build the outputs for production in the dist/
directory by default.
Usage: rslib build [options]
build the library for production
Options:
-c --config <config> specify the configuration file, can be a relative or absolute path
-r --root <root> specify the project root directory, can be an absolute path or a path relative to cwd
--env-mode <mode> specify the env mode to load the `.env.[mode]` file
--env-dir <dir> specify the directory to load `.env` files
--lib <id> build the specified library (may be repeated)
-w --watch turn on watch mode, watch for changes and rebuild
-h, --help display help for command
Watch Mode
You can use rslib build --watch
or rslib build -w
to enable watch mode for watching for changes and rebuild.
Environment Variables
Rslib supports injecting env variables or expressions into the code during build, which is helpful for distinguishing the running environment or replacing constants.
You can see more details in Rsbuild - Environment Variables.
NOTE
- If format is
esm
or cjs
, process.env.NODE_ENV
will be preserved in the build output.
- If format is
mf
or umd
, process.env.NODE_ENV
will be replaced to ensure that the output can run in the browser.
Env Mode
Rslib supports reading .env.[mode]
and .env.[mode].local
files. You can specify the env mode using the --env-mode <mode>
flag.
For example, set the env mode as test
:
npx rslib build --env-mode test
Rslib will then read the following files in sequence:
.env
.env.local
.env.test
.env.test.local
TIP
The --env-mode
option takes precedence over process.env.NODE_ENV
.
It is recommended to use --env-mode
to set the env mode, and not to modify process.env.NODE_ENV
.
Env Directory
By default, the .env
file is located in the root directory of the project. You can specify the env directory by using the --env-dir <dir>
option in the CLI.
For example, to specify the env directory as config
:
npx rslib build --env-dir config
In this case, Rslib will read the ./config/.env
and other env files.
Example
For example, create a .env
file and add the following contents:
Then in the rslib.config.ts
file, you can access the above env variables using import.meta.env.[name]
or process.env.[name]
:
rslib.config.ts
console.log(import.meta.env.FOO); // 'hello'
console.log(import.meta.env.BAR); // '1'
console.log(process.env.FOO); // 'hello'
console.log(process.env.BAR); // '1'
Now, create a .env.local
file and add the following contents:
The value of BAR
is overwritten to '2'
:
rslib.config.ts
console.log(import.meta.env.BAR); // '2'
console.log(process.env.BAR); // '2'
rslib inspect
The rslib inspect
command is used to view the Rsbuild config and Rspack config of the Rslib project.
Usage: rslib inspect [options]
inspect the Rsbuild / Rspack configs of Rslib projects
Options:
-c --config <config> specify the configuration file, can be a relative or absolute path
-r --root <root> specify the project root directory, can be an absolute path or a path relative to cwd
--env-mode <mode> specify the env mode to load the `.env.[mode]` file
--env-dir <dir> specify the directory to load `.env` files
--lib <id> inspect the specified library (may be repeated)
--output <output> specify inspect content output path (default: ".rsbuild")
--verbose show full function definitions in output
-h, --help display help for command
When you run the command npx rslib inspect
in the project root directory, the following files will be generated in the dist/.rsbuild
directory of the project:
rsbuild.config.mjs
: Represents the Rsbuild configuration used during the build.
rspack.config.web.mjs
: Represents the Rspack configuration used during the build.
➜ npx rslib inspect
Inspect config succeed, open following files to view the content:
- Rsbuild Config: /project/dist/.rsbuild/rsbuild.config.mjs
- Rspack Config (esm): /project/dist/.rsbuild/rspack.config.esm.mjs
Verbose Content
By default, the inspect command omits the content of functions in the configuration object. You can add the --verbose
option to output the complete content of functions:
Multiple Output Formats
If the current project has multiple output formats, such as ESM artifact and CJS artifact simultaneously, multiple Rspack configuration files will be generated in the dist/.rsbuild
directory.
➜ npx rslib inspect
Inspect config succeed, open following files to view the content:
- Rsbuild Config (esm): /project/dist/.rsbuild/rsbuild.config.esm.mjs
- Rsbuild Config (cjs): /project/dist/.rsbuild/rsbuild.config.cjs.mjs
- Rspack Config (esm): /project/dist/.rsbuild/rspack.config.esm.mjs
- Rspack Config (cjs): /project/dist/.rsbuild/rspack.config.cjs.mjs
rslib mf dev
The rslib mf dev
command is utilized to start Rsbuild dev server for the Module Federation format.
This enables you to develop and debug your mf format module within the host app.
Usage: rslib mf [options] <dev>
start Rsbuild dev server of Module Federation format
Options:
-c --config <config> specify the configuration file, can be a relative or absolute path
-r --root <root> specify the project root directory, can be an absolute path or a path relative to cwd
--env-mode <mode> specify the env mode to load the `.env.[mode]` file
--env-dir <dir> specify the directory to load `.env` files
-h, --help display help for command
Common Options
Filter Libraries
Rslib provides the --lib
option to run command for specified libraries.
# Only build the library with id `esm`
npx rslib build --lib esm
The --lib
option can be repeated to specify multiple libraries.
# Build the libraries with id `esm` and `cjs`
npx rslib build --lib esm --lib cjs
Check out the lib.id to learn how to get or set the library ID.