Babel是什么
Babel在现代前端开发中起着基石的作用,负责将高级js语法转换成浏览器支持的语法。
Babel由什么组成
@babel/core
: babel核心代码
@babel/cli
:babel的命令行工具
@babel/pollyfill
:针对浏览器的补丁
plugin
:babel通过插件完成实际的转换工作,不同插件完成不同格式的转换
preset
: 预置的插件集合,方便用户使用
config file
:babel基于用户定制的配置文件完成转换
配置的几种方式
babel
有两种级别的配置文件:
项目级
: 'babel.config.json',针对整个项目进行配置
文件级
:‘,babelrc.json’, 可单独针对文件进行配置
-
babel.config.json
放在根目录下(package.json同级目录),管理整个项目配置
{
"presets": [],
"plugins": []
}
-
.babelrc.json
可放在根目录或子目录下,对单独的目录进行定制
{
"presets": [...],
"plugins": [...]
}
- bable.config.js
该种方式可以在js中添加Nodejs的代码,更加方便的定制配置
module.exports = {
"presets": [],
"plugins": []
}
如:针对不用环境进行配置
const presets = [ ... ];
const plugins = [ ... ];
if (process.env["ENV"] === "prod") {
plugins.push(...);
}
module.exports = { presets, plugins };
或调用api
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
- package.json
{
"name": “my project”,
"babel"L {
"presets": [...],
"plugins": [...]
}
}
注:babel支持的文件类型有.json, .js, .cjs, .mjs
网友评论