babel预设与插件

预设

// babel.config.js
module.exports = {
	//"presets": [
	//	"@babel/preset-env" //可以让你使用最新js语法, 需要.browserslintrc文件确定需要兼容的浏览器
	//]
	// 如果需要@babel/preset-env的配置项
	"presets": [
		["@babel/preset-env", {
			"useBuildIns": "usage", //转化新的api, 如 new Promise, Array.of()
			"corejs": 3, //默认使用core-js的版本为2,如果安装的core-js为3.x.x则需要该配置,
			//core-js需要自行安装 npm i core-js
		}]
	]
}

插件

//babel.config.js
module.exports = {
	plugin: [
		"@babel/plugin-proposal-class-properties",
		"@babel/plugin-proposal-optional-chaining",
		"babel-plugin-transform-remove-console"
	]
}

@babel/plugin-proposal-class-properties //让你可以在类中定义初始化字段

class A{
	a=1; //不经过插件编译会报错
}

@babel/plugin-proposal-optional-chaining //方便的取出对象属性

var obj = {
	far: {
		bar: {
			baz: 42
		}
	}
}
const baz = obj?.far?.bar?.baz; //baz = 42;
const que = obj?.qcx?.que; //que = undefined

babel-plugin-transform-remove-console //打包后去除所有的console

---

其他插件与预设,可以去官网查找

两者的运行顺序

插件运行在预设之前

{
	presets: ["a", "b"],
	plugin: ["c", "d"]
}
//运行顺序
c --> d --> b --> a