babel踩坑记录
flytam Lv4


1、如果子模块和外部模块都有.babelrc时,babel处理子模块时,是使用的子模块的babelrc处理的。本质上是文件查找babelrc是从当前文件向上查找的,因为使用到子仓库的原因很容易把这个问题忽略了

解决方法:
外部模块不使用babelrc,而是使用babel.config.js文件代替。如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function(api) {
api.cache(true)

const presets = [
[
'@babel/preset-env',
{
modules: false
}
],
'@babel/preset-react',
'@babel/preset-typescript'
]
const plugins = ['@babel/plugin-proposal-class-properties']

return {
presets,
plugins
}
}

2、如果babel使用了@babel/preset-typescript插件,自己写的babel转换插件,需要手动指定babel文件位置

1
2
3
4
5
6
7
8
9
10
11
12
    const result = babel.transform(source, {
plugins: [
{
visitor: {
...
}
}
],
filename: './babel.config.js'
})
...

不然就会报错Error: [BABEL] unknown: Configuration contains string/RegExp pattern, but no filename was passed to Babel

  • Post title:babel踩坑记录
  • Post author:flytam
  • Create time:2019-04-10 16:58:32
  • Post link:https://blog.flytam.vip/babel踩坑记录.html
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.