如何使用Rollup将@mui等外部依赖的接口类型打包进内部UI库

不需要更换Rollup打包工具，通过调整配置即可实现外部依赖类型的合并导出，具体操作步骤如下：

1. 安装类型打包专用插件 #

默认的@rollup/plugin-typescript仅会做类型校验和单文件转译，不会合并外部依赖的类型定义，需要新增rollup-plugin-dts专门处理类型打包：

npm install rollup-plugin-dts --save-dev

2. 调整Rollup配置 #

将打包流程拆分为运行时代码打包、类型合并打包两个独立任务，配置示例如下：

import path from 'path';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import nodeResolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import svgr from '@svgr/rollup';
import commonjs from '@rollup/plugin-commonjs';
import includePaths from 'rollup-plugin-includepaths';
import babel from '@rollup/plugin-babel';
import dts from 'rollup-plugin-dts';

const relativeEntryPath = 'index.ts'; // 替换为你的实际入口路径
const external = ['react', 'react-dom']; // 仅将react等宿主依赖标记为外部，@mui、formik-mui不加入该列表

// 运行时代码打包配置
const jsConfig = {
  input: path.join('src', relativeEntryPath),
  external,
  output: [
    {
      file: 'dist/index.js',
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    nodeResolve(),
    // 关闭默认的类型生成能力，交给dts插件统一处理
    typescript({ tsconfig: './tsconfig.json', declaration: false }),
    svgr(svgrConfig),
    commonjs(),
    includePaths({
      include: {},
      paths: ['src/old'],
      extensions: ['.js', '.ts', '.tsx'],
      external: [],
    }),
    babel({ exclude: 'node_modules/**', babelHelpers: 'bundled' }),
  ],
};

// 类型合并打包配置
const dtsConfig = {
  input: path.join('src', relativeEntryPath),
  external,
  output: [{ file: 'dist/index.d.ts', format: 'esm' }],
  plugins: [dts()],
};

export default [jsConfig, dtsConfig];

3. 配套配置调整 #

• 确认tsconfig.json中开启skipLibCheck: true，避免第三方包类型校验异常导致打包失败
• 确认package.json中类型入口配置正确，且没有将@mui/material、formik-mui放到peerDependencies中：

{
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts"
}

注意事项 #

如果打包后出现个别第三方类型缺失，可以检查tsconfig.json的include配置是否覆盖了所有类型来源，也可以手动在入口文件补充缺失的类型导出即可。

内容的提问来源于stack exchange，提问作者Otavio Bonder