多package下babel编译问题

Front End Babel

项目背景

之前一直使用typescript + babel 编译项目

typescript作用只是单纯用来做强类型检查, babel则真正用来编译代码.

{
  "target": "exnext"
}

偶然一次机会, 发现编译后的部分代码并没有编译object-rest-spread 而这部分代码全都在一个子目录下

由于我的项目使用了git-submodules来管理组件, 所以该组件目录下带有package.json文件

恰好这部分文件只经过了typescript的编译, 而没有经过babel

其他Page都正确的被babel编译, 不存在问题.

于是想起是否子目录下的文件不被babel编译, 看了下官方文档, 的确有相关的描述.

问题原因

当项目目录中含有多个package.json时候, 原有的.babelrc已经不再适用

image.

这时候经过webpack编译 只有src下的文件会被正确编译, sub下的文件不会被babel编译

此时webpack会报错

image

原因就是这部分文件没有被babel正确编译

上述问题解决办法

官方有详细说明

将.babelrc改成babel.config.js, 此时sub下的文件可以被正确编译

image

当然, 使用babel.config.js还可以灵活的配置各个package中babel编译规则. 具体的还是请看官方文档