Babel转ES6模块为CommonJS时重导出报仅getter错误如何解决

这个报错来自@babel/preset-env默认ESM转CommonJS逻辑的固有行为：默认非松散模式下，Babel会通过Object.defineProperty把所有ESM导出挂载到module.exports对象上，且仅配置get访问器，不提供set访问器，导出属性本质是只读的。
触发报错的常见场景包括：

• 重导出的多个来源存在同名标识符，Babel处理时尝试覆写已定义的只读属性
• 打包流程中其他插件/逻辑尝试给入口模块的exports对象写入已有属性
• 子模块间存在隐式循环依赖，导致导出属性未完成初始化时就被尝试写入

按改造成本从低到高排序：

方案1：调整Babel预设配置开启松散模式 #

直接修改@babel/preset-env配置，开启loose: true即可。松散模式下Babel会放弃严格的ESM语义模拟，直接用普通赋值语句exports.xxx = xxx挂载导出，不会生成只读getter，从根源解决问题：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      loose: true,
      modules: 'cjs' // 显式指定模块转换目标为CommonJS，避免被其他配置覆盖
    }]
  ]
}

注意：松散模式会跳过ESM规范中导出绑定实时更新、严格只读等边缘特性校验，框架开发场景如果没有用到这些特性，不会有功能影响。

方案2：修改重导出写法绕开Babel的特殊处理 #

不要直接使用export { xxx } from 'xxx'的重导出语法，改成先导入、再统一导出的写法，让Babel把导出内容当做普通局部变量处理，避免重导出逻辑生成冲突的只读getter：

// framework目录入口文件
import { useState, createEffect } from '../reactive/index.js'
import { createElement, createComponent, convertToNode, insert, render } from '../dom/index.js'

export {
  useState,
  createEffect,
  createElement,
  createComponent,
  convertToNode,
  insert,
  render
}

这个方案不需要修改Babel配置，改造成本极低，适合快速修复问题。

方案3：拆分Babel和构建工具的职责（长期推荐） #

Babel本质是语法转译工具，并不适合处理模块打包、规范转换的逻辑。长期维护的话建议调整构建流程：

• 给Babel配置modules: false，关闭模块规范转换能力，只让它处理JSX/TS、新语法降级等语法类工作
• 引入Rollup/esbuild等专业构建工具，负责模块解析、依赖打包、重导出合并、多规范产物生成等工作
  这种方式生成的产物不会出现getter/setter冲突问题，同时能自动完成tree-shaking、重复导出校验，产物质量更高。

针对多模块聚合导出的框架类项目，推荐按以下原则设计结构，从架构层面规避这类构建问题：

• 按功能拆分独立子模块（dom、reactive等），每个子模块独立完成语法转译，不互相耦合
• 聚合入口（framework入口）仅做导出聚合，不包含任何业务逻辑，构建时让打包工具直接合并子模块导出，不要让Babel单独处理入口的重导出语法
• 如果需要支持子路径导入（比如用户直接导入framework/dom），直接在package.json的exports字段配置路径映射，不需要在源码目录维护多层重导出文件
• 构建流程明确分层：语法转译类工作交给Babel，模块解析、打包、产物生成类工作交给专门的构建工具，避免多个工具的模块处理逻辑互相冲突。

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