前言
现今的前端开发中，我们需要应对不同的浏览器和环境。通过使用 Babel 可以让我们使用更加现代和流行的 JavaScript 语言特性，并将它们转换为在浏览器中执行的 ECMAScript 5 代码。Parcel 是一个快速、零配置的 Web 应用程序打包工具，可以帮助我们构建现代，灵活的应用程序。
在本文中，我们将介绍如何在项目中使用 Babel 和 Parcel 的组合。
环境配置
在使用 Babel 和 Parcel 之前，我们需要安装它们。我们可以使用 npm 进行安装。
# 安装 Babel 和 Parcel npm install --save-dev @babel/core @babel/preset-env parcel-bundler
现在，我们使用以下命令运行 Parcel，它会为我们的应用程序创建一个本地服务器：
parcel index.html
接下来，打开浏览器，并访问http://localhost:1234地址。如果一切顺利，你将能够看到你的应用程序正在运行。
Babel 配置
Babel 需要配置文件来描述我们想要使用哪些插件和预设。我们将创建一个名为 “.babelrc” 的文件来定义我们的 Babel 配置。
{
"presets": [
"@babel/preset-env"
]
}在上面的例子中，我们指定了一个名为 @babel/preset-env 的预设。这个预设可以根据运行时环境来转换我们的代码，以使其在不同的浏览器和环境中运行。
Parcel 配置
我们要使用 Parcel ，需要创建一个名为 “.parcelrc” 的配置文件。在这个文件中，我们可以设置一些参数来修改 Parcel 的行为。
-- -------------------- ---- -------
-
---------- -------------------------
--------------- -
-- ----
----- - ---------
--
--------------- -
----- ---------
-
-我们可以看到，我们在这个文件中定义了一个 “browserslist”。这个属性告诉了 Parcel 对什么样的浏览器进行兼容性处理。在这个例子中，我们指定了任何使用率超过 1% 的浏览器，以及最近 2 个版本的浏览器。
我们还定义了一个 “transformers” 的属性，用来告诉 Parcel 把哪些文件类型转换为 ES5 代码。在这个例子中，我们针对 JavaScript 文件类型使用了 Babel 转换器。
示例代码
接下来，我们来看一个简单的示例代码。这个示例代码使用了箭头函数和解构赋值特性。
const getName = ({ first, last }) => `${first} ${last}`;
const name = getName({ first: 'John', last: 'Doe' });
console.log(name); // John Doe上述代码在运行时会出现错误，因为一些老的浏览器不支持上述 ES6 语法。让我们使用 Babel 和 Parcel 来对其进行转换。
在我们添加 Babel 和 Parcel 之前，这个代码段无法在 Internet Explorer 上运行。现在，让我们在添加完 Babel 和 Parcel 之后，来重新运行该代码。
-- -------------------- ---- -------
---- --------
--- ------- - -------- ------------- -
--- ----- - -----------
---- - ----------
------ ---------------- - ----------------
--
--- ---- - ---------
------ -------
----- -----
---
------------------ -- ---- ---我们可以看到，Babel 将箭头函数转换为普通函数，并且解构赋值语法也被转换为了标准的 ES5 语法。现在，我们的示例代码可以在各种老浏览器上运行了。
结论
在本文中，我们展示了如何使用 Babel 和 Parcel 在项目中使用目前 JavaScript 的最新特性，同时还能保证代码在各种浏览器和环境下的兼容性。我们还提供了一些示例代码来演示如何使用这些工具来转换我们的代码。
使用 Babel 和 Parcel 可以让我们构建出有现代感的应用程序，并保证代码在各种浏览器和环境下的兼容性，这是一项非常实用的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6744529cc22b09372b13ac4a