You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何配置Rollup实现拆分构建,避免将内部私有包代码打包进目标产物

如何配置Rollup实现拆分构建,避免将内部私有包代码打包进目标产物

嘿,这个问题我之前拆分内部模块构建时也踩过坑!核心原因是你当前的Rollup配置里,_react模块的构建没有把内部的default模块标记为外部依赖,所以Rollup自动把它的代码内联进去了。咱们一步步改,就能实现你要的效果:

第一步:修改Rollup配置,给_react构建添加外部依赖规则

打开你的rollup.config.mjs,找到_react对应的配置项,做两个关键修改:

  1. 添加external规则:告诉Rollup不要打包../default这个内部模块,把它当成外部依赖保留导入语句
  2. 配置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的代码内嵌进去😎

火山引擎 最新活动