前言
为了提高 JavaScript 代码的兼容性和可维护性，Babel 是我们必不可少的工具之一。而 Babel Preset 则可以在整个项目中使用相同的 Babel 插件和配置。
本文将介绍一个 Babel Preset，即 @morlay/babel-preset 的使用方法，帮助你更好地管理你的 Babel 项目。首先，我们来了解一下这个 Preset 背后的作者和背景。
@morlay/babel-preset 的介绍
@morlay 是一位来自中国的前端开发者，他创建了一个名为 @morlay/babel-preset 的 Babel Preset，旨在为所有 JavaScript 开发者提供更好的开发体验。
这个 Preset 基于 babel-preset-env，并添加了一些可选的插件和配置，使得它更适合在中国和一些其他地方使用。
本篇文章将重点介绍 @morlay/babel-preset 的使用方法，包括安装、配置和使用。
安装
@morlay/babel-preset 可以使用 NPM 直接安装：
npm install @morlay/babel-preset --save-dev
或者使用 Yarn 安装：
yarn add @morlay/babel-preset --dev
然后，在你的项目的 .babelrc 中配置使用这个 Preset：
{
"presets": ["@morlay"]
}配置项
@morlay/babel-preset 包含了许多选项，下面分别介绍它们的作用：
loose
Type: boolean, Default: false
此选项控制是否使用“loose”模式。在“loose”模式下，一些转换将被删除，以提高代码的性能和简化。
modules
Type: 'amd' | 'umd' | 'systemjs' | 'commonjs' | 'cjs' | 'auto' | false, Default: 'auto'
此选项控制输出模块类型。当模块类型被设置为 'auto' ，输出模块类型将被自动探测。
useBuiltins
Type: boolean, Default: false
此选项控制是否使用 ponyfill 替代某些内置函数，例如 Promise、Array.from 等。
targets
Type: Object, Default: {}
此选项指定了项目要支持的浏览器或 Node.js 版本。例如：
{
"targets": {
"chrome": "58",
"ie": "11"
}
}在这种情况下，@morlay/babel-preset 将会生成能在 Chrome 58 和 IE 11 上运行的代码。
debug
Type: boolean, Default: false
此选项控制是否打印正在使用的插件和转换器的详细信息。
spec
Type: boolean, Default: false
此选项控制是否使用更符合规范的代码。使用 true 时，会生成更多的代码，但是可以确保代码的正确性和兼容性。
使用示例
假设我们有以下代码：
const getUserInfo = async user => {
const response = await fetch(`/api/user/${user}`);
const data = await response.json();
return data;
};我们可以使用 @morlay/babel-preset 来编译这个代码：
import 'babel-polyfill'; // 引入 polyfill
const getUserInfo = async user => {
const response = await fetch(`/api/user/${user}`);
const data = await response.json();
return data;
};之后，我们将会得到一个生成的 JavaScript 代码：
-- -------------------- ---- ------- ---- -------- -------------------------- ----- ----------- - ----- ---- -- - ----- -------- - ----- --------------------------- ----- ---- - ----- ---------------- ------ ----- --
总结
在这篇文章中，我们向大家展示了如何使用和配置 @morlay/babel-preset。通过使用这个 Preset，我们可以简化我们的 Babel 配置，同时使项目更加的具有可维护性和兼容性。
希望这篇文章能帮助你更好地管理你的 Babel 项目，如果你有任何问题或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f349eb5dbf7be33b2566e4f