close
logo
Rslib
指南
配置
博客
English
简体中文
指南
配置
博客
English
简体中文
logo
Rslib

开始

介绍
快速上手
名词解释
NPM 包

解决方案

Node.js
React
Vue

基础

命令行工具
配置 Rslib
使用 TypeScript
产物输出格式
产物结构
升级 Rslib

进阶

处理三方依赖
产物兼容性
类型生成
引用静态资源
引用 SVGR
引用 JSON 文件
模块联邦
使用 Storybook

迁移

Modern.js Module
tsup

常见问题

功能类问题
📝 在 GitHub 上编辑此页
上一页升级 Rslib
下一页产物兼容性

#处理三方依赖

本节介绍如何在 bundle 模式下处理三方依赖。

通常,项目所需的三方依赖可以通过包管理器的 install 命令安装。安装成功后,它们通常会出现在项目的 package.json 文件中的 dependencies 和 devDependencies 字段下。

package.json
{
  "dependencies": {},
  "devDependencies": {}
}

dependencies 字段下的依赖通常来说是这个包运行所需的依赖,如果这些三方依赖声明在 devDependencies 字段下,那么在生产运行时会出现缺失依赖。

除了 dependencies 字段,peerDependencies 也可以声明在生产环境中需要的依赖,但它更强调这些依赖在项目运行时的存在,类似于插件机制。

#三方依赖的默认处理

默认情况下,当生成 CJS 或 ESM 产物时,dependencies、optionalDependencies 和 peerDependencies 字段下的三方依赖不会被 Rslib 打包。

这是因为在 npm 包安装时,其 dependencies 也会被安装。通过不打包 dependencies,可以减少包的体积。

如果需要打包某些依赖,建议将它们从 dependencies 移动到 devDependencies,这相当于预打包依赖,并减少依赖安装的体积。

#示例

如果项目依赖了 react。

package.json
{
  "dependencies": {
    "react": "^18"
  },
  // 或
  "peerDependencies": {
    "react": "^18"
  }
}

当在源代码中使用 react 依赖时:

src/index.ts
import React from 'react';
console.info(React);

此时产物中不会包含 react 的代码:

dist/index.js
import external_react_default from 'react';
console.info(external_react_default);

如果想要修改默认的处理方式,可以通过下面的 API 进行修改:

  • lib.autoExternal
  • output.externals

#排除指定三方依赖

上面介绍的配置可以让你实现对三方依赖更细微的处理。

例如当我们需要仅对某些依赖不进行打包处理的时候,可以按照如下方式进行配置:

TIP

在这种情况下,某些依赖可能不适合打包。如果遇到这种情况,则可以按照下面的方式进行处理。

export default defineConfig({
  lib: [
    {
      // ...
      autoExternal: true,
      output: {
        externals: ['pkg-1', /pkg-2/],
      },
      // ...
    },
  ],
});