.babelrc与babel.config.js
问题背景
在开发组件库 EJ/UI
时,使用的技术栈:Typescript、Vue3、Storybook。
因为在开发某些组件时(Table、TableColumn)需要用到 jsx
语法。所以需要安装Vue官方开发的babel plugin:@vue/babel-plugin-jsx
。
于是在项目的 /.storybook
的路径下创建了 .babelrc
文件用于配置添加的babel plugin,这时候出现了第一个奇怪的问题:
- 在项目编译时??和?.等可选符编译报错,因此为了解决该问题,我不得不手动配置上
@babel/plugin-proposal-optional-chaining
和@babel/plugin-proposal-nullish-coalescing-operator
插件。然而在未配置此文件之前是不报此错误的,因为typescript已经为我们做好了可选符的编译配置,这时候我们可以合理怀疑,是配置的.babelrc文件冲掉了原有的配置。 - 遇到的第二个问题是,在编译在/src/utils路径下的Typescript写的ES6代码时,没有把ES6代码转义成ES5,因此造成webpack报错。这时候我们更加可以验证,由于对.babelrc文件的配置冲刷掉原有的babel配置了。
babel.config.js与.babelrc区别
通过babel官方文档我们可以看到,对于babel.config.js与.babelrc区别的描写,我们可以理解为:
- babel.config.js进行的配置是对于该项目下所有文件生效(报错node_modules)。
- .babelrc进行配置仅对.babelrc所在目录下的文件有效,且会以.babelrc的配置为主,忽略掉babel.config.js。
解决
知道了原因,我们就很好解决了。
正是由于 /.storybook/.babelrc
冲掉了项目的默认babel配置,才造成的无法正确编译。我们只需要把对babel的配置文件由 /.storybook/.babelrc
换到 /babel.config.js
即可。