功能类问题

样式处理

bundleless 模式如何跳过对 Less / Sass 等文件的预处理?

bundleless 是指对每个源文件单独进行编译构建,可以理解为仅对源文件进行代码转换的过程。跳过对 .less/.scss 文件的预处理需要:

  1. 设置 source.entry.less/.scss 文件从入口里移除。
  2. 设置 output.copy.less/.scss 文件拷贝到产物目录。
  3. 设置 redirect.style.extensionfalse 禁用对 .less/.scss 文件导入路径的重定向行为。

下面是一个跳过 .scss 文件处理的例子,src 里面所有的 .scss 文件都会被拷贝到产物目录下并且保留一致的相对路径。

rslib.config.ts
export default defineConfig({
  lib: [
    {
      // ...
      source: {
        entry: {
          index: ['./src/**', '!src/**/*.scss'],
        },
      },
      output: {
        copy: [{ from: '**/*.scss', context: path.join(__dirname, 'src') }],
      },
      redirect: {
        style: {
          extension: false,
        },
      },
    },
  ],
});

代码压缩

如何保留产物文件代码中的注释?

默认情况下,Rslib 使用 SWC 清除注释,对应的 SWC 的 jsc.minify.format 配置为

{
    comments: 'some',
    preserveAnnotations: true,
}

这将仅保留部分 legal 注释及 annotations。如果你想保留所有注释,可以参考如下配置:

rslib.config.ts
export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          format: {
            comments: 'all', // 将保留所有注释
          },
        },
      },
    },
  },
};

如何在保留代码可读性的同时,尽可能压缩产物体积?

通过压缩代码可以减小产物体积,并提高加载速度,但是压缩后的代码可读性较差,不利于调试。如果你想保留代码可读性,可以通过如下配置,保留变量名并禁用压缩以方便调试。参考 web-infra-dev/rsbuild#966.

rslib.config.ts
export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          // 保留变量名并禁用压缩以方便调试
          mangle: false,
          minify: false,
          compress: true,
        },
      },
    },
  },
};

类型声明文件生成

如何在dts.bundletrue 时额外排除指定的依赖?

Rslib 通过 rsbuild-plugin-dts 完成对类型声明文件的生成,该插件支持通过 output.externals 进行配置,用于从打包后的类型声明文件中排除指定的依赖。

举个例子:常见的 React 组件库通常不会将 @types/react 声明在 peerDependencies 中,而是仅声明在 devDependencies,按照 autoExternal 处理依赖的逻辑,在打包时 Rslib 会尝试将 @types/react 一同打包进类型声明文件产物中,但在实践中组件库并不应该打包 @types/react

此时可以通过配置 output.externals 来排除 @types/react

rslib.config.ts
export default {
  lib: [
    // ...
  ],
  output: {
    externals: ['@types/react'],
  },
};

其他

如何在生成产物时保留源码中的__webpack_hash__ 等模块变量?

Rslib 底层使用的 Rspack,在构建时会默认将 __webpack_hash____webpack_nonce____webpack_public_path__模块变量 转换为包含 __webpack_require__ 的运行时代码。如果你需要在产物中保留这些模块变量,可以通过配置 source.define 来实现,如下所示:

  1. 在源码中将需要保留的模块变量替换为一个特征名称,如 __webpack_hash__ 替换为 WEBPACK_HASH__webpack_nonce__ 替换为 WEBPACK_NONCE__webpack_public_path__ 替换为 WEBPACK_PUBLIC_PATH 等。
const isUpdateAvailable = () => lastCompilationHash !== __webpack_hash__; 
const isUpdateAvailable = () => lastCompilationHash !== WEBPACK_HASH; 
  1. source.define 中添加需要保留的模块变量,传入的配置对象的键名是源码中替换后的变量名称,值是需要在产物中保留的模块变量。
rslib.config.ts
export default defineConfig({
  source: {
    define: {
      WEBPACK_HASH: '__webpack_hash__',
      WEBPACK_NONCE: '__webpack_nonce__',
      WEBPACK_PUBLIC_PATH: '__webpack_public_path__',
    },
  },
});