如何配置Rollup实现拆分构建,避免将内部私有包代码打包进目标产物
如何配置Rollup实现拆分构建,避免将内部私有包代码打包进目标产物
嘿,这个问题我之前拆分内部模块构建时也踩过坑!核心原因是你当前的Rollup配置里,_react模块的构建没有把内部的default模块标记为外部依赖,所以Rollup自动把它的代码内联进去了。咱们一步步改,就能实现你要的效果:
第一步:修改Rollup配置,给_react构建添加外部依赖规则
打开你的rollup.config.mjs,找到_react对应的配置项,做两个关键修改:
- 添加
external规则:告诉Rollup不要打包../default这个内部模块,把它当成外部依赖保留导入语句 - 配置
output.paths:把代码里的../default导入路径,重定向到你构建好的default产物路径
修改后的_react配置块长这样:
{ input: 'src/_react/index.ts', // 新增:标记内部default模块为外部依赖 external: (id) => { // 保留原有的peer依赖处理(比如React这类外部包) const isPeerDep = external()(id); // 把指向default模块的导入都标记为外部 const isDefaultInternalDep = id.startsWith('../default'); return isPeerDep || isDefaultInternalDep; }, output: [ { file: `dist/react/cjs/index.js`, format: 'cjs', sourcemap: true, // 新增:重定向cjs产物的default模块导入路径 paths: { '../default': '../../default/cjs/index' } }, { file: `dist/react/esm/index.js`, format: 'esm', sourcemap: true, // 新增:重定向esm产物的default模块导入路径 paths: { '../default': '../../default/esm/index' } } ], plugins: [ external(), resolve(), commonJS(), typescript({ tsconfig: './tsconfig.json' }), // terser(), 按需开启压缩 ], }
第二步:调整构建顺序
因为_react的产物依赖已经构建好的default产物,所以要先构建default再构建_react。你可以在package.json里加个脚本方便执行:
"scripts": { "build:default": "rollup -c rollup.config.mjs --config-index 0", "build:react": "rollup -c rollup.config.mjs --config-index 1", "build": "npm run build:default && npm run build:react" }
为什么这样改就行?
- 原来的
external()插件只处理peer依赖(比如React),不会管你自己的内部模块,所以Rollup会默认把../default的代码打包进去。咱们手动加的external函数,专门把../default相关的导入标记为外部,阻止Rollup内联代码。 output.paths的作用是替换导入路径:比如_react的cjs产物里,原本的../default会被替换成../../default/cjs/index,这样就能正确找到已经构建好的default模块产物了。
额外小提示
如果之后你打算把这两个模块做成独立的npm包(比如@your-lib/default和@your-lib/react),那可以把paths里的路径改成包名,比如:
paths: { '../default': '@your-lib/default' }
同时记得在external里也加上这个包名,确保Rollup不会把它打包进去。
现在你执行npm run build,就能得到你想要的产物了——_react的代码里会保留对default模块的导入,而不是把obj的代码内嵌进去😎




