---
sidebar_position: 4
---

# 处理三方依赖

一般来说，项目所需要的第三方依赖可以通过包管理器的 `install` 命令安装，在安装第三方依赖成功后，这些第三方依赖一般会出现在项目 `package.json` 的 `dependencies` 和 `devDependencies` 下。

```json title="pacakge.json"
{
  "dependencies": {},
  "devDependencies": {}
}
```

`"dependencies"` 下的依赖通常来说是这个包运行所需的依赖， `"devDependencies"` 则代表着开发依赖。

除了 `"dependencies"` 以外，[`"peerDependencies"`](/guide/basic/before-getting-started#peerdependencies) 也可以声明在生产环境下运行所需要的依赖，此时会和它的宿主共享一份依赖。

## 第三方依赖的默认处理

在 Modern.js Module 里，**默认情况下不会对 `"dependencies"` 以及 `"peerDependencies"` 下的第三方依赖进行打包处理**。

这是因为在安装 npm 包时，其 `"dependencies"` 也会被安装。不打包 `"dependencies"`，可以减小包产物的体积。

如果需要打包某些依赖，建议将它们从 `"dependencies"` 挪到 `"devDependencies"` ，这相当于对依赖进行 **prebundle** ，可以减小依赖安装的体积。

### 示例

如果项目依赖了 `react`:

```json title="package.json"
{
  "dependencies": {
    "react": "^17"
  },
  // or
  "peerDependencies": {
    "react": "^17"
  }
}
```

当源码中使用了 `react` 依赖:

```tsx title="src/index.ts"
import React from 'react';
console.info(React);
```

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

```js title="dist/index.js"
import React from 'react';
console.info(React);
```

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

- [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)

## 排除指定第三方依赖

在上面我们提到了 `buildConfig.autoExternal` API 的用途，同时 [`buildConfig.externals`](/api/config/build-config#externals) 可以实现对三方依赖更细微的处理。

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

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

```ts
epxort default defineConfig({
  buildConfig: {
    autoExternal: false,
    externals: ['pkg-1', /pkg-2/],
  }
});
```