在使用babel之前，我们一般需要设定一些配置，那么babel有哪些地方可以设定配置呢？
我们以@babel/core中的transform方法为例
transform第二个引数可以配置预设（presets）和外挂（plugins）等引数
var babel = require('@babel/core');let code = `var a: string = "";`;
const result = babel.transform(code, {
babelrc: true,
caller: {
name: "my-custom-tool",
supportsStaticESM: true
},
test: function(path, obj) {
return true;
},
filename: 'index.js',
// extends: 'ajv'
// configFile: 'babelrc'
parserOpts: {
plugins: ['typescript']
},
plugins: [],
presets: []
});
这个配置很重要，因为后面的一些配置档案是根据这里的配置定址的，如果这里不配置，后面的配置档案可能找不到，我们可能把它当做基础配置。
前端编译器babel
通过上面的基础配置，配一个configFile属性
配置configFile有两种情况：1、如果不配置（configFile!==false）
babel会自动在工程的根目录下寻找一个babel.config.js档案，那么我们就可以在这个档案中配置
2、如果configFile是一个字串，字串会被当做包名，那么babel就会在程序执行目录下寻找这个包，这个包就可以当做配置。
配置package.json档案
使用pkgjson的前提是在基础配置中设定filename属性，因为babel是以filename所在目录一层层向上寻找pkgjson的，找到的第一个pkgjson就被用来当做配置（和node寻找node_modules一样）。我们可以在pkgjson中设定babel字段属性，在这个属性中我们可以设定babel的配置。
package.json的层级目录中配置
babel在定址pkgjson档案时会记录向上寻找的每一个层级目录（直到找pkgjson那一层），那么在这些层级目录中可以配置.babelrc和.babelrc.js档案有三点需要注意：
1、每一层只能配置一个档案，两个都配置会报错，会让你移除一个
2、只会使用定址到的第一个配置档案，其他的就会被忽略
3、上面的pkgjson中的配置和这里的配置也是二选一，否则也会报错
另外在每个层级下还可以配置.babelignore，和上面一样只取定址到的第一个
env和overrides中设定配置
上面每个配置档案都可以设定env和overrides两个属性babel可以根据执行环境env配置
module.exports = function(cache) {
let env = cache.env;
env();
return {
presets: ['@babel/env'],
plugins: [
['@babel/transform-react-jsx', {
a: 1
}, 'test'],
['@babel/ala', {
b: 2
}]
],
passPerPreset: true
env : {
development: {
presets: [],
plugins: []
},
production: {
presets: [],
plugins: []
}
},
overrides: []
};
}
也可以在overrides中配置，这个属性是个阵列，阵列每个元素中又可以配置env。
总结
babel执行的时候会把上面每个配置都走一遍，最终会把寻找到的所有配置合在一起！喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
