前言

Parcel 的核心卖点是：

零配置，开箱即用。

相比 Webpack 的高度可配置，Parcel 更强调自动识别项目里需要的能力，让开发者尽快跑起来。

---

Parcel 怎么使用

最简单的项目里，可以直接把 HTML 作为入口。

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/index.tsx"></script>
  </body>
</html>

然后在 package.json 中配置：

{
  "source": "src/index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  }
}

运行：

pnpm dev

Parcel 会自动识别 TypeScript、JSX、CSS、图片等资源，并完成对应处理。

---

Parcel 自动处理什么

Parcel 内置了很多常见能力：

• TypeScript
• JSX
• CSS
• Sass / Less
• CSS Modules
• 图片和字体
• 代码分割
• HMR
• 生产压缩

这也是它“零配置”的来源。

开发者不需要一开始就理解完整构建链，也能快速启动项目。

---

Parcel 的优点

Parcel 最大的优点是上手成本低。

它适合：

• 快速原型
• 学习项目
• Demo
• 小型个人项目
• 不想写构建配置的简单应用

尤其当目标是“先跑起来”，Parcel 会非常舒服。

---

Parcel 的限制

Parcel 的问题也很明显：

自动化越强，深度定制时越容易受限。

大型企业项目通常会有很多特殊要求：

• 特殊资源处理
• 多环境构建策略
• 复杂代理
• 定制代码分割
• 特殊部署产物
• 与内部平台集成

这些场景下，Webpack、Vite、Rsbuild 等工具通常更容易做深度定制。

---

Parcel 和 Vite 怎么选

如果只是小项目或 Demo，Parcel 和 Vite 都可以。

但现代前端应用里，Vite 通常更常见。

场景	更推荐
快速 Demo	Parcel / Vite
React / Vue 新项目	Vite
学习构建工具	Parcel
企业应用	Vite / Webpack
复杂定制	Webpack / Vite

Parcel 的优势是简单，Vite 的优势是生态和现代开发体验更均衡。

---

总结

Parcel 的一句话理解：

我尽量不让你写配置，先把项目跑起来。

它不是复杂工程的最强选手，但在快速原型和小项目里很省心。