> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt. # Output compatibility This chapter introduces how to specify which target environment should be supported. ## Syntax downgrade In Rslib, you can configure the syntax to which JavaScript and CSS will be downgraded by setting [lib.syntax](/config/lib/syntax.md). This configuration supports setting the ECMAScript version directly, such as `es2015`, `es2022`, etc., and also supports setting the query syntax of [Browserslist](https://browsersl.ist/), such as `last 2 versions`, `> 1%`, `node >= 16`, `chrome >= 80`, etc. It should be noted that Rslib does not read the Browserslist related configuration files (such as `.browserslistrc` or the `browserslist` field in `package.json`). You can override by setting [output.overrideBrowserslist](/config/rsbuild/output.md#outputoverridebrowserslist) which has a higher priority than [lib.syntax](/config/lib/syntax.md). ## Polyfill Before dealing with compatibility issues, it is recommended that you understand the following background knowledge to better handle related issues. Check out the background knowledge on [syntax transpilation and API polyfill](https://rsbuild.rs/guide/advanced/browser-compatibility#syntax-downgrade-and-api-downgrade). ### Browser Normally, we don't need to inject polyfill for npm packages, this step should be done on the web application framework side, but in some scenarios we need to inject polyfill in order to make our library run directly in low version browsers. Note that this plugin does not transform your code syntax, it only injects polyfill for unsupported functions used in your code, importing them as normal functions instead of polluting the global. You need to install the [core-js-pure](https://www.npmjs.com/package/core-js-pure) dependency. #### Set up The polyfill relies on Babel to inject the polyfill code, so you need to install the [Rsbuild Babel plugin](https://rsbuild.rs/plugins/list/plugin-babel) and [babel-plugin-polyfill-corejs3](https://www.npmjs.com/package/babel-plugin-polyfill-corejs3) to inject the polyfill code. ```sh [npm] npm add @rsbuild/plugin-babel babel-plugin-polyfill-corejs3 -D ``` ```sh [yarn] yarn add @rsbuild/plugin-babel babel-plugin-polyfill-corejs3 -D ``` ```sh [pnpm] pnpm add @rsbuild/plugin-babel babel-plugin-polyfill-corejs3 -D ``` ```sh [bun] bun add @rsbuild/plugin-babel babel-plugin-polyfill-corejs3 -D ``` ```sh [deno] deno add npm:@rsbuild/plugin-babel npm:babel-plugin-polyfill-corejs3 -D ``` And install [core-js-pure](https://www.npmjs.com/package/core-js-pure) as the runtime relied code. ```sh [npm] npm add core-js-pure ``` ```sh [yarn] yarn add core-js-pure ``` ```sh [pnpm] pnpm add core-js-pure ``` ```sh [bun] bun add core-js-pure ``` ```sh [deno] deno add npm:core-js-pure ``` Configure the Babel plugin with polyfill options, set the [targets](https://babeljs.io/docs/options#targets) field to specify the target browser version. ```ts title="rslib.config.ts" import { pluginBabel } from '@rsbuild/plugin-babel'; // [!code highlight] import { defineConfig } from '@rslib/core'; export default defineConfig({ lib: [ { format: 'esm', }, ], plugins: [ // [!code highlight:14] pluginBabel({ babelLoaderOptions: { plugins: [ [ require('babel-plugin-polyfill-corejs3'), { method: 'usage-pure', targets: { ie: '10' }, version: '3.29', }, ], ], }, }), ], }); ``` #### Configurations Check out [babel-plugin-polyfill-corejs3](https://www.npmjs.com/package/babel-plugin-polyfill-corejs3) documentation for more details. ### Node.js :::tip About Node Polyfill Normally, we don't need to use Node libs on the browser side. However, it is possible to use some Node libs when the code will run on both the Node side and the browser side, and Node Polyfill provides browser versions of polyfills for these Node libs. ::: By using [@rsbuild/plugin-node-polyfill](https://github.com/rstackjs/rsbuild-plugin-node-polyfill), Node core libs polyfills are automatically injected into the browser-side, allowing you to use these modules on the browser side with confidence. #### Set up Rslib uses [@rsbuild/plugin-node-polyfill](https://github.com/rstackjs/rsbuild-plugin-node-polyfill) to provide the Node Polyfill feature. ```sh [npm] npm add @rsbuild/plugin-node-polyfill -D ``` ```sh [yarn] yarn add @rsbuild/plugin-node-polyfill -D ``` ```sh [pnpm] pnpm add @rsbuild/plugin-node-polyfill -D ``` ```sh [bun] bun add @rsbuild/plugin-node-polyfill -D ``` ```sh [deno] deno add npm:@rsbuild/plugin-node-polyfill -D ``` Then add the plugin into the plugins field. ```ts title="rslib.config.ts" import { defineConfig } from '@rslib/core'; import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill'; export default defineConfig({ lib: [{ format: 'esm' }], plugins: [pluginNodePolyfill()], }); ``` #### Configurations - For projects with `bundle` enabled, the Node Polyfill will be injected and included in the output. - For projects with `bundle` disabled, polyfills are not injected into the output by default. To avoid inlining the polyfill in every module, the modules are externalized and need to be added to dependencies manually, follow these steps: 1. Configure `output.external` with `resolvedPolyfillToModules`, which you can import from [@rsbuild/plugin-node-polyfill](https://github.com/rstackjs/rsbuild-plugin-node-polyfill). This will externalize the polyfill modules to the installed polyfill dependencies. 2. Install used polyfill modules as dependencies. With the above steps, every usage of the polyfill module will be replaced by the corresponding module in the `externals` field. Checkout the of the example for more details. Check out the documentation of [@rsbuild/plugin-node-polyfill](https://github.com/rstackjs/rsbuild-plugin-node-polyfill), all the configurations are applicable for Rslib.