bundleless 是指对每个源文件单独进行编译构建,可以理解为仅对源文件进行代码转换的过程。跳过对 .less/.scss
文件的预处理需要:
source.entry
将 .less/.scss
文件从入口里移除。output.copy
将 .less/.scss
文件拷贝到产物目录。redirect.style.extension
为 false
禁用对 .less/.scss
文件导入路径的重定向行为。下面是一个跳过 .scss
文件处理的例子,src
里面所有的 .scss
文件都会被拷贝到产物目录下并且保留一致的相对路径。
默认情况下,Rslib 使用 SWC 清除注释,对应的 SWC 的 jsc.minify.format 配置为
这将仅保留部分 legal 注释及 annotations。如果你想保留所有注释,可以参考如下配置:
通过压缩代码可以减小产物体积,并提高加载速度,但是压缩后的代码可读性较差,不利于调试。如果你想保留代码可读性,可以通过如下配置,保留变量名并禁用压缩以方便调试。参考 web-infra-dev/rsbuild#966.
dts.bundle
为true
时额外排除指定的依赖?Rslib 通过 rsbuild-plugin-dts 完成对类型声明文件的生成,该插件支持通过 output.externals 进行配置,用于从打包后的类型声明文件中排除指定的依赖。
举个例子:常见的 React 组件库通常不会将 @types/react
声明在 peerDependencies
中,而是仅声明在 devDependencies
,按照 autoExternal 处理依赖的逻辑,在打包时 Rslib 会尝试将 @types/react
一同打包进类型声明文件产物中,但在实践中组件库并不应该打包 @types/react
。
此时可以通过配置 output.externals 来排除 @types/react
。
__webpack_hash__
等模块变量?Rslib 底层使用的 Rspack,在构建时会默认将 __webpack_hash__
、__webpack_nonce__
、__webpack_public_path__
等 模块变量 转换为包含 __webpack_require__
的运行时代码。如果你需要在产物中保留这些模块变量,可以通过配置 source.define 来实现,如下所示:
__webpack_hash__
替换为 WEBPACK_HASH
,__webpack_nonce__
替换为 WEBPACK_NONCE
,__webpack_public_path__
替换为 WEBPACK_PUBLIC_PATH
等。source.define
中添加需要保留的模块变量,传入的配置对象的键名是源码中替换后的变量名称,值是需要在产物中保留的模块变量。