本地安装random-colors-palette遇可选链操作符的Babel解析错误咨询

我们正在开发一款纯JavaScript实现的随机颜色生成模块。在CodeSandbox在线环境中安装该模块时运行无异常，但在本地项目中安装时出现构建报错：

./node_modules/random-colors-palette/randomColors.js 141:39
Module parse failed: Unexpected token (141:39)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     if (!repeat) {
|       delete cc[hueNumber].shades[shadeR[0]];
>       if (Object.entries(cc[hueNumber]?.shades).length === 0) cc.splice(hueNumber, 1);
|     }

经定位，报错直接原因是对应代码行中使用了?.可选链操作符。需要确认可行的解决方案，同时保证模块既可以在React.js项目中正常安装使用，也能作为纯JS模块独立在网页中直接引入使用。

问题本质 #

基于react-scripts构建的React项目，默认的Babel转译规则仅处理项目自身src目录的代码，跳过所有node_modules目录下的第三方包，不对第三方包的语法做降级处理。
?.可选链属于ES2020标准语法，如果发布到npm的模块直接把未经过语法降级的源码上传，本地构建时就会因为不识别该语法触发解析报错。而CodeSandbox的默认转译规则会对所有依赖包的新语法做自动降级，因此在线环境不会出现同类问题。

适配方案 #

• 推荐方案：从模块发布侧完成语法适配（长期维护成本最低，完全满足双场景使用要求）
  • 调整模块的发布流程，不要将包含可选链等ES2020+新语法的源码直接发布到npm
  • 发布前通过Babel将源码转译为ES5兼容语法，同时保留CommonJS、ES Module两种导出格式，分别在package.json中配置main、module字段入口
  • 改造完成后，不管是基于webpack、Vite、Rollup构建的前端项目，还是通过<script>标签直接引入的纯JS页面，都可以正常运行模块代码，不需要下游使用方做任何额外配置
• 临时过渡方案：仅针对使用该模块的React项目调整转译规则
  • 基于react-scripts的项目需要先通过craco、react-app-rewired等工具开启自定义配置权限，修改babel-loader的排除规则，将random-colors-palette模块从node_modules的转译排除列表中移除，让Babel可以对该模块的代码做语法降级
  • 注意：该方案仅能解决React项目的报错问题，纯JS场景下如果直接引入未做语法降级的模块文件，旧版本浏览器依然会因为不识别可选链语法运行报错，无法满足模块独立使用的要求
• 注意事项：不要为了适配单个模块放开全量node_modules目录的转译权限，否则会大幅拖慢本地构建速度，仅需针对性调整对应模块的转译规则即可

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