初探下一代“零配置”打包工具：Parcel

2023-10-06 06:05:51

在前端开发领域，webpack 一直是构建工具中的佼佼者，但它复杂繁琐的配置一直让人头疼。如今，新一代的“零配置”打包工具 Parcel 应运而生，它凭借着开箱即用的特性和强大的功能，迅速成为前端开发者的新宠。在春节假期归来后的这几天，我尝试把手上的业务迁移到 Parcel 构建，并踩了一些坑，以下就是我的心得体会。

首先，Parcel 极其适合小型单页 React 页面的构建。如果你正在开发一个小型单页 React 应用，那么 Parcel 将会是一个非常好的选择。它无需任何配置，即可轻松地将你的代码打包成一个可供生产环境使用的文件。此外，Parcel 还支持热更新，这使得你在开发过程中可以实时看到代码更改的效果，大大提高了开发效率。

其次，Parcel 的另一个优势在于它的速度非常快。与 webpack 相比，Parcel 的构建速度要快得多。这对于那些需要快速迭代的项目来说是一个非常大的优势。例如，如果你正在开发一个需要频繁更改的原型，那么 Parcel 将会是一个非常好的选择。

当然，Parcel 也有一些缺点。例如，它不支持 Tree Shaking。Tree Shaking 是一种优化代码体积的技术，可以将未使用过的代码从最终的构建文件中剔除。这对于那些需要构建大型项目的开发者来说可能是一个问题。此外，Parcel 还不支持一些高级的 webpack 插件。如果你需要使用这些插件，那么你可能需要考虑使用 webpack。

总体而言，Parcel 是一款非常优秀的“零配置”打包工具。它非常适合小型单页 React 页面的构建，并且速度非常快。如果你正在开发一个小型单页 React 应用，那么我强烈建议你使用 Parcel。

Parcel 的踩坑心得

在使用 Parcel 构建项目的过程中，我也踩了一些坑。以下是一些常见的坑：

坑 1：使用 CSS Modules 时需要注意

如果你在项目中使用了 CSS Modules，那么你需要注意，Parcel 在处理 CSS Modules 时有一些特殊的规则。你需要在你的项目中安装 parcel-plugin-css-modules 插件，并在你的 package.json 文件中添加以下配置：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-css-modules": "^2.0.0"
  }
}

坑 2：使用图片时需要注意

如果你在项目中使用了图片，那么你需要注意，Parcel 在处理图片时也有一些特殊的规则。你需要在你的项目中安装 parcel-plugin-image 插件，并在你的 package.json 文件中添加以下配置：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-image": "^1.0.0"
  }
}

坑 3：使用字体时需要注意

如果你在项目中使用了字体，那么你需要注意，Parcel 在处理字体时也有一些特殊的规则。你需要在你的项目中安装 parcel-plugin-fonts 插件，并在你的 package.json 文件中添加以下配置：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-fonts": "^1.0.0"
  }
}