Rollup打包未包含全部依赖代码，产物缺失如何解决？

我正在尝试使用Rollup构建一个包，以下是我的Rollup配置代码：

const config: RollupOptions[] = [
    {
        input: "./index.ts",
        output: [
            {
                dir: "dist/cjs",
                format: "cjs",
                sourcemap: true,
                preserveModules: true,
                preserveModulesRoot: ".",
                exports: "named",
            },
            {
                dir: "dist/esm",
                format: "esm",
                sourcemap: true,
                preserveModules: true,
                preserveModulesRoot: ".",
            },
        ],
        plugins: [
            peerDepsExternal() as InputPluginOption,
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            terser(),
        ],
        external: ["react"],
    },
    {
        input: "./index.ts",
        output: {
            dir: "dist/types",
            format: "es",
            preserveModules: true,
            preserveModulesRoot: ".",
        },
        plugins: [dts()],
    },
];

我的index.ts文件中导入并导出了useFetch.ts和useGraphQL中的部分方法，但执行构建命令rollup -c --bundleConfigAsCjs --configPlugin typescript后，仅生成了index.js，没有包含useFetch.js和useGraphQL.js的实际代码。这导致我将该包作为依赖安装后，导入方法时调用失败，请问该如何解决这个问题？

1. 调整TypeScript配置 #

确保tsconfig.json配置正确，让Rollup能识别模块结构并生成正确的类型文件：

{
  "compilerOptions": {
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "./dist/types",
    "outDir": "./dist",
    "rootDir": ".",
    // 其他原有配置
  }
}

2. 修改Rollup的输入配置 #

不要仅将index.ts作为唯一入口，把所有需要独立输出的模块都加入输入列表：

const config: RollupOptions[] = [
    {
        input: {
            index: "./index.ts",
            useFetch: "./useFetch.ts",
            useGraphQL: "./useGraphQL.ts"
        },
        output: [
            {
                dir: "dist/cjs",
                format: "cjs",
                sourcemap: true,
                preserveModules: true,
                preserveModulesRoot: ".",
                exports: "named",
            },
            {
                dir: "dist/esm",
                format: "esm",
                sourcemap: true,
                preserveModules: true,
                preserveModulesRoot: ".",
            },
        ],
        plugins: [
            peerDepsExternal() as InputPluginOption,
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            terser(),
        ],
        external: ["react"],
    },
    {
        input: {
            index: "./index.ts",
            useFetch: "./useFetch.ts",
            useGraphQL: "./useGraphQL.ts"
        },
        output: {
            dir: "dist/types",
            format: "es",
            preserveModules: true,
            preserveModulesRoot: ".",
        },
        plugins: [dts()],
    },
];

3. 配置package.json的导出规则 #

在package.json中添加exports字段，明确各个模块的导入路径，确保使用者能正确导入：

{
  "name": "your-package-name",
  "version": "1.0.0",
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "types": "./dist/types/index.d.ts",
  "exports": {
    ".": {
      "require": "./dist/cjs/index.js",
      "import": "./dist/esm/index.js",
      "types": "./dist/types/index.d.ts"
    },
    "./useFetch": {
      "require": "./dist/cjs/useFetch.js",
      "import": "./dist/esm/useFetch.js",
      "types": "./dist/types/useFetch.d.ts"
    },
    "./useGraphQL": {
      "require": "./dist/cjs/useGraphQL.js",
      "import": "./dist/esm/useGraphQL.js",
      "types": "./dist/types/useGraphQL.d.ts"
    }
  }
}

4. 验证preserveModules的生效条件 #

确认tsconfig.json中的rootDir设置为项目根目录，确保Rollup能基于原始目录结构保留独立模块。如果问题仍存在，可以暂时移除terser插件测试，排除插件强制内联代码的可能。

内容的提问来源于stack exchange，提问作者Maifee Ul Asad