babel-preset-mbp

babel-preset-mbp

babel预设的最佳实践

参考来源

• stage-2/3提案: https://github.com/tc39/proposals
• stage-1提案: https://github.com/tc39/proposals/blob/master/stage-1-proposals.md
• stage-0提案: https://github.com/tc39/proposals/blob/master/stage-0-proposals.md
• 已完成-提案: https://github.com/tc39/proposals/blob/master/finished-proposals.md
• 不维护-提案: https://github.com/tc39/proposals/blob/master/inactive-proposals.md
• stage完整: https://github.com/babel/babel/tree/v7.8.5/packages/babel-preset-stage-0
• stage参考: https://npmjs.com/package/@babel/preset-stage-0
• preset参考: https://babeljs.io/docs/en/babel-preset-env
• transform参考: https://babeljs.io/docs/en/babel-plugin-transform-runtime
• transform-runtime一定配上version参数,减少直接注入代码
• preset-env内corejs参数,结合useBuiltIns来polyfill对象和方法,相当于import"core-js/es/array"
• transform-runtime内corejs参数,转换需要polyfill的对象为局部变量,相当于将Promise替换成_Promise

使用方法

• .babelrc

{ "presets": [["mbp", { "ts": true }]] }

查看依赖

• 涵盖常用babel依赖,一次引入,随意使用
• https://npmgraph.js.org/?q=babel-preset-mbp

option

interface Option {
	ts?: boolean | object; // 是否启用ts预设
	vue?: 2 | 3 | { ver: 2 | 3 }; // 是否支持vue版jsx
	react?: boolean | object; // 是否启用react预设
	run?: boolean | object; // 是否启用transform-runtime
	css?: boolean | object; // 是否启用自动识别css_modules
	repl?: boolean | object; // 是否启用引入替换
	[key: string]: any; // env和vue共用配置项
} // 属性值为对象时表示对应语法预设的配置项

开发

• https://babeljs.io/docs/en/config-files#config-function-api

module.exports = function (_api, _option, _cwd) {
	return { presets: [ ... ], plugins: [ ... ] };
};

变更

• 新增依赖 babel-plugin-import
• 新增依赖 babel-plugin-module-resolver
• 新增依赖 babel-plugin-transform-inline-environment-variables
• plugins 会运行在 presets 之前
• plugins 从首个顺序执行
• presets 从尾个逆序执行
• 子依赖包内包含的命令不会自动安装,常见使用组合
  • @babel/cli + babel-preset-mbp
  • babel-loader + babel-preset-mbp
  • @rollup/plugin-babel + babel-preset-mbp