.babelrc与babel.config.js

问题背景

在开发组件库 EJ/UI 时，使用的技术栈：Typescript、Vue3、Storybook。

因为在开发某些组件时（Table、TableColumn）需要用到 jsx 语法。所以需要安装Vue官方开发的babel plugin：@vue/babel-plugin-jsx。

于是在项目的 /.storybook 的路径下创建了 .babelrc 文件用于配置添加的babel plugin，这时候出现了第一个奇怪的问题：

1. 在项目编译时??和?.等可选符编译报错，因此为了解决该问题，我不得不手动配置上 @babel/plugin-proposal-optional-chaining 和 @babel/plugin-proposal-nullish-coalescing-operator 插件。然而在未配置此文件之前是不报此错误的，因为typescript已经为我们做好了可选符的编译配置，这时候我们可以合理怀疑，是配置的.babelrc文件冲掉了原有的配置。
2. 遇到的第二个问题是，在编译在/src/utils路径下的Typescript写的ES6代码时，没有把ES6代码转义成ES5，因此造成webpack报错。这时候我们更加可以验证，由于对.babelrc文件的配置冲刷掉原有的babel配置了。

babel.config.js与.babelrc区别

通过babel官方文档我们可以看到，对于babel.config.js与.babelrc区别的描写，我们可以理解为：

1. babel.config.js进行的配置是对于该项目下所有文件生效（报错node_modules）。
2. .babelrc进行配置仅对.babelrc所在目录下的文件有效，且会以.babelrc的配置为主，忽略掉babel.config.js。

解决

知道了原因，我们就很好解决了。

正是由于 /.storybook/.babelrc 冲掉了项目的默认babel配置，才造成的无法正确编译。我们只需要把对babel的配置文件由 /.storybook/.babelrc 换到 /babel.config.js 即可。