在前端开发中，我们经常需要将我们的源文件打包成可在浏览器中运行的代码。为了简化这个过程，出现了许多打包工具，如 webpack 和 Browserify 等。然而，配置这些工具通常是一项耗时且繁琐的任务。
幸运的是，现在有一个更简单的解决方案，它被称为 Parcel。Parcel 是一个零配置的打包工具，它能够快速地将你的源文件打包成可直接在浏览器中运行的代码。
安装 Parcel
要开始使用 Parcel，首先需要全局安装它。在命令行中运行以下命令：
npm install -g parcel-bundler
打包一个简单的项目
让我们从一个简单的项目开始。创建一个新的文件夹，并在其中创建一个名为 index.html 的文件，以及一个名为 index.js 的 JavaScript 文件。
在 index.html 文件中，添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>Parcel Example</title>
</head>
<body>
<h1>Hello, Parcel!</h1>
<script src="./index.js"></script>
</body>
</html>
在 index.js 文件中，添加以下内容：
console.log('Hello, Parcel!');
现在，打开命令行，并导航到包含这些文件的文件夹中。运行以下命令来打包项目：
parcel index.html
Parcel 将自动分析你的项目，并将生成的代码输出到浏览器可以运行的格式。结果将在命令行中显示，并且一个新的文件夹 .cache 将被创建，其中包含一些 Parcel 必要的临时文件。
引入其他文件类型
Parcel 还支持从 JavaScript 文件中引入其他文件类型，如 CSS、图片和字体等。只需在你的 JavaScript 文件中引入这些文件，并将它们作为依赖关系。
例如，如果你想引入一个名为 style.css 的 CSS 文件，则需要在 index.js 文件中添加以下内容：
import './style.css';
Parcel 会自动处理这个导入语句，并将 style.css 文件连接到生成的 HTML 文件中。
自定义配置
尽管 Parcel 是一个零配置工具，它仍然提供了一些自定义配置的选项。如果你想对打包过程进行更多的控制，你可以在项目根目录下创建一个名为 .parcelrc 的文件，并在其中指定你的配置选项。
例如，如果你想将所有输出文件放在一个名为 dist 的文件夹中，可以创建以下 .parcelrc 文件：
{
"outDir": "./dist"
}
使用 Parcel 进行零配置打包可以极大地简化前端项目的构建过程。它的速度快，配置简单，非常适合小型到中型的项目。
我希望这篇博客对你有所帮助，并能够让你更加了解并善于使用 Parcel 进行打包。
Happy coding!
本文来自极简博客，作者：樱花飘落，转载请注明原文链接：使用Parcel进行零配置打包
