在前端开发中，我们常常需要使用 Babel 工具将 ES6+ 语法转换成能够兼容各种浏览器的 ES5 语法。而为了简化这个过程，我们可以使用 Babel 预设（preset）来进行配置。在本文中，我们将介绍 npm 包 @schwarzhirsch/babel-preset 的使用教程。
安装 @schwarzhirsch/babel-preset
在使用 @schwarzhirsch/babel-preset 之前，我们需要先安装它。可以通过 npm 命令来进行安装：
npm install --save-dev @schwarzhirsch/babel-preset
配置 Babel
安装完 @schwarzhirsch/babel-preset 后，我们需要在项目的 .babelrc 文件中进行配置。以下是一个示例配置：
{
"presets": ["@schwarzhirsch/babel-preset"]
}以上配置中，我们将预设 @schwarzhirsch/babel-preset 添加到了项目的 Babel 配置中。这样，在进行代码转换时，Babel 就会根据这个预设进行配置。
使用示例
接下来，让我们来看一个简单的使用示例。假设我们有一个 ES6 的类，如下所示：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------------ -
------ ------------- -- ----------- ----- ------
-
-
----- ---- - --- -------------- ----
-------------------------------如果我们直接运行上面的代码，会得到一个语法错误：
Uncaught SyntaxError: Unexpected identifier
这是因为浏览器不支持 ES6 类的语法。为了兼容各种浏览器，我们需要使用 Babel 进行转换。
在安装配置好 @schwarzhirsch/babel-preset 后，我们只需要将上面的代码复制到一个文件中，然后运行 Babel 命令进行转换：
npx babel src --out-dir dist
上面的命令将 src 目录下的所有文件进行转换，并将转换后的代码存储在 dist 目录下。运行完成后，我们可以在 dist 目录下找到转换后的代码：
-- -------------------- ---- ------- ---- -------- -------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - - --- ------ - -------- ------------ ---- - --------------------- -------- --------- - ----- -------- - ---- -- --------------------------- - -------- -- - ------ -------------------- - -- ------------------- - ----- ------- -- --- ---- - --- -------------- ---- -------------------------------
可以看到，经过转换后的代码变成了 ES5 兼容的语法，可以在所有浏览器中正常运行了。
总结
@schwarzhirsch/babel-preset 是一个非常方便的 Babel 预设，可以帮助我们快速配置 Babel，并将 ES6+ 的代码转换成 ES5 兼容的代码。有了它，我们可以更方便地使用最新的 JavaScript 语法，同时也可以兼容大多数浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab674a
