babel踩坑记录

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

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

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文件位置

    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

你可能感兴趣的:(javascript学习)