简体中文

处理三方依赖

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

pacakge.json

{
  "dependencies": {},
  "devDependencies": {}
}

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

除了 "dependencies" 以外，"peerDependencies" 也可以声明在生产环境下运行所需要的依赖，此时会和它的宿主共享一份依赖。

第三方依赖的默认处理

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

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

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

如果项目依赖了 react:

package.json

{
  "dependencies": {
    "react": "^17"
  },
  // or
  "peerDependencies": {
    "react": "^17"
  }
}

当源码中使用了 react 依赖:

src/index.ts

import React from 'react';
console.info(React);

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

dist/index.js

import React from 'react';
console.info(React);

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

在上面我们提到了 buildConfig.autoExternal API 的用途，同时 buildConfig.externals 可以实现对三方依赖更细微的处理。

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

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

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