Babel是什么
Babel在現(xiàn)代前端開(kāi)發(fā)中起著基石的作用羞福，負(fù)責(zé)將高級(jí)js語(yǔ)法轉(zhuǎn)換成瀏覽器支持的語(yǔ)法。
Babel由什么組成
@babel/core： babel核心代碼
@babel/cli：babel的命令行工具
@babel/pollyfill：針對(duì)瀏覽器的補(bǔ)丁
plugin：babel通過(guò)插件完成實(shí)際的轉(zhuǎn)換工作绎狭，不同插件完成不同格式的轉(zhuǎn)換
preset: 預(yù)置的插件集合，方便用戶使用
config file：babel基于用戶定制的配置文件完成轉(zhuǎn)換
配置的幾種方式
babel有兩種級(jí)別的配置文件：
項(xiàng)目級(jí)： 'babel.config.json'褥傍，針對(duì)整個(gè)項(xiàng)目進(jìn)行配置
文件級(jí)：‘,babelrc.json’, 可單獨(dú)針對(duì)文件進(jìn)行配置
-
babel.config.json
放在根目錄下（package.json同級(jí)目錄）儡嘶，管理整個(gè)項(xiàng)目配置
{
"presets": [],
"plugins": []
}
-
.babelrc.json
可放在根目錄或子目錄下，對(duì)單獨(dú)的目錄進(jìn)行定制
{
"presets": [...],
"plugins": [...]
}
- bable.config.js
該種方式可以在js中添加Nodejs的代碼恍风，更加方便的定制配置
module.exports = {
"presets": [],
"plugins": []
}
如：針對(duì)不用環(huán)境進(jìn)行配置
const presets = [ ... ];
const plugins = [ ... ];
if (process.env["ENV"] === "prod") {
plugins.push(...);
}
module.exports = { presets, plugins };
或調(diào)用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
