前言
在前端开发过程中，我们经常需要使用一些工具来将代码转换成浏览器可以理解的语言，其中 Babel 是一个非常常用的工具，它可以将 ES6/ES7 的代码转换成 ES5 代码，从而让我们可以在更多的浏览器上运行我们的代码。而在使用 mdpack 这个工具来生成项目文档时，我们也可以使用一个名为 mdpack-plugin-babel 的 npm 包来将我们的文档中的代码片段转换成浏览器可读的代码，方便我们展示和测试代码。
安装
使用 npm 包管理器来安装 mdpack-plugin-babel，通过以下命令即可完成安装：
npm install mdpack-plugin-babel --save-dev
使用
安装完成后，在 mdpack 的配置文件中（通常是 mdpack.config.js）配置我们的插件，如下所示：
-- -------------------- ---- -------
-------- -
-
----------------------
-
-------- -
-
--------------------
-
-------- -
--- ----
-
-
-
-
-
-
--以上代码的意思是使用 mdpack-plugin-babel 插件，并且以 IE11 为目标浏览器进行代码转换，其中 presets 部分可以根据自己的需求修改，这里的 @babel/preset-env 是一个支持将 ES6/ES7/ES8 转换成 ES5 代码的 preset。
在编写 markdown 文档时，如果需要对代码片段进行转换，则在代码片段的上下文中使用特殊标记将代码标记为需要转换的代码，如下所示：
\```js babel
const a = () => {
console.log('Hello World!');
};
a();
\```
以上代码的意思是将其中的 JavaScript 代码部分标记为需要进行 babel 转换的代码，通过这种方式可以让我们的文档中使用最新版本的 JavaScript 语言特性，同时让这些代码可以在现代浏览器和较老的浏览器中运行。
示例
下面是一个简单的示例，我们在 markdown 中编写以下代码：
\```js babel
const a = () => {
console.log('Hello World!');
};
a();
\```
在运行 mdpack 后，我们可以得到如下的 HTML 代码：
-- -------------------- ---- ------- ---------- -------------------- ---- -------- --- - - -------- --- - ------------------ --------- -- ---- -------------
可以看到，我们使用 mdpack-plugin-babel 将 ES6 代码成功地转换成了浏览器可以理解的 ES5 代码。
总结
通过使用 npm 包 mdpack-plugin-babel，我们可以将 markdown 文档中的代码片段转换成浏览器可读的代码，从而方便我们展示和测试代码。在使用时，只需要按照上述步骤进行插件配置并在 markdown 文档中使用特殊标记标记需要进行转换的代码即可。这样，我们就能够在最新的 JavaScript 语言特性和较老的浏览器中平衡使用，提高代码的兼容性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f70238a385564ab66f5