Parcel

用于
  • 网络的零配置构建工具.
  • JavaScript.
  • CSS.
  • HTML.
  • TypeScript.
  • React.
  • 图像.
  • SASS.
  • SVG.
  • Vue.
  • .
  • Less.
  • CoffeeScript.
  • Node.
  • Stylus.
  • Pug.
  • Electron.
  • Elm.
  • WebGL.
  • 扩展.
  • GraphQL.
  • MDX.
  • XML.

Parcel 将出色的开箱即用开发体验与可扩展的架构相结合,可以将您的项目从入门阶段带到大型生产应用程序。

开始使用 GitHub

为我们其他人提供的构建工具。

Parcel 从出色的开发体验开始,从启动新项目到迭代和调试,再到发布到生产环境。不再需要费力地配置,也不需要花费数小时来跟上最佳实践——它可以正常工作!

零配置

从 HTML 文件开始。添加一个 <script> 标签。也许还有一些 CSS。怎么样,TypeScript?SASS?图像?没问题。Parcel 可以像您预期的那样开箱即用。

Parcel 开箱即用地支持多种语言和文件类型,从 HTML、CSS 和 JavaScript 等 Web 技术到图像、字体、视频等资产。当您使用默认情况下未包含的文件类型时,Parcel 将 自动安装所有必要的插件和开发依赖项!

开始使用 →
index.html
<html>
  <head>
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script type="module" src="app.tsx"></script>
  </body>
</html>

开发服务器

Parcel 开箱即用地包含一个开发服务器。只需运行 parcel index.html 即可开始。

需要 HTTPS?使用 --https 标志运行 Parcel,它会自动为您生成证书!或者,如果您愿意,也可以提供您自己的证书。

Parcel 还具有内置的 API 代理,可以帮助模拟您的生产环境。

了解更多 →

热重载

当您进行更改时,Parcel 会自动在浏览器中更新您的代码——无需重新加载页面!

Parcel 还与 React Fast RefreshVue 热重载 API 集成,以在更新之间自动保留您的应用程序状态。这使您在进行更改时能够获得即时反馈,而不会让您脱离上下文。

了解更多 →

诊断

如果您在代码或配置中出现错误,Parcel 会在您的终端和浏览器中显示 漂亮的诊断信息

每个错误都包含一个语法突出显示的代码框架,指向错误发生的准确位置,以及有关如何解决问题的提示。

许多诊断信息甚至包含一个文档链接,您可以在其中了解更多信息。

$ parcel index.html
Server running at http://localhost:1234
🚨 Build failed.

@parcel/core: Cannot resolve 'ract' from './index.js'
/dev/app/index.js:1:19
> 1 | import React from 'ract';
>   |                   ^^^^^^
  2 | 
  3 | function Test() {

@parcel/resolver-default: Cannot find module 'ract'
Did you mean 'react'?

自动生产优化。

Parcel 会自动优化整个应用程序以用于生产。这包括树形摇动和缩小您的 JavaScript、CSS 和 HTML,调整图像大小和优化图像,内容哈希,自动代码拆分等等。

树形摇动

Parcel 开箱即用地支持树形摇动 ES 模块和 CommonJS!它会静态分析每个模块的导入和导出,并删除所有未使用的内容。

树形摇动甚至可以在动态 import() 边界、共享捆绑包甚至跨语言之间工作!如果您使用 CSS 模块,未使用的类将被自动删除。

了解更多 →
index.js
import {add} from './math';

console.log(add(2, 3));
math.js
export function add(a, b) {
  return a + b;
}
export function square(a) {
  return a * a;
}

缩小

Parcel 开箱即用地包含 JavaScript、CSS、HTML 和 SVG 的缩小器!只需运行 parcel build index.html,您的整个应用程序将被自动构建和优化。

了解更多 →

图像优化

Parcel 支持调整图像大小、转换和优化图像!只需在 HTML、CSS、JavaScript 等中引用图像文件时传递格式和大小的查询参数,Parcel 就会处理转换和优化过程。

您甚至可以为不同的设备或浏览器请求同一源图像的多个大小或格式!

了解更多 →
index.html
<picture>
  <source type="image/webp" srcset="image.jpg?as=webp&width=400, image.jpg?as=webp&width=800 2x">
  <source type="image/jpeg" srcset="image.jpg?width=400, image.jpg?width=800 2x">
  <img src="image.jpg?width=400" width="400">
</picture>

压缩

在部署之前使用 Gzip 和 Brotli 压缩您的应用程序。

了解更多 →

代码拆分

当应用程序的多个部分依赖于相同的公共模块时,它们会 自动去重到一个单独的捆绑包中。这允许将常用依赖项与您的应用程序代码并行加载,并由浏览器单独缓存!

代码拆分也支持 CSS。如果您从 JavaScript 导入 CSS,则会生成一个同级 CSS 捆绑包,并与 JS 捆绑包并行加载。

了解更多 →
Dashboard Profile React Lodash

内容哈希

dashboard.js react.js dashboard.a96cdf.js

Parcel 会自动在所有输出文件的名称中包含内容哈希。这使 长期浏览器缓存成为可能,因为除非名称发生变化,否则输出保证不会发生变化。

Parcel 还使用每个条目中的清单解析所有引用的捆绑包相对于其父级的路径。这意味着对引用捆绑包的更改不会使父级的缓存失效,并且输出文件可以在位置之间移动而无需重新构建。

了解更多 →

从小型网站到大型应用程序,可扩展性强。

Parcel 不需要任何配置即可开始使用。但是,随着应用程序的增长和构建需求变得更加复杂,您可以通过几乎所有方式扩展 Parcel。

简单的配置?!

配置 Parcel 就像呼吸新鲜空气一样。.parcelrc 是一种简单的基于 JSON 的配置格式,它使用 glob 来匹配您的源文件以构建管道。您可以扩展默认配置并添加插件来处理自定义文件类型,或者覆盖和扩展默认值。

了解更多 →

扩展

从默认配置或社区预设开始。

变换器

编译单个源文件并提取依赖项。

解析器

解析对文件路径或虚拟模块的依赖关系。

命名器

确定输出文件的名称。

打包器

将多个资产合并到单个输出文件中。

优化器

压缩、优化和转换输出文件。

压缩器

压缩并以多种格式编码输出文件。

报告器

接收构建进度和完成的事件。

.parcelrc
{
  "extends": ["@parcel/config-default"],
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  },
  "resolvers": ["@parcel/resolver-glob", "..."],
  "namers": ["@company/parcel-namer", "..."],
  "packagers": {
    "*.{jpg,png}": "parcel-packager-image-sprite"
  },
  "optimizers": {
    "*.js": ["parcel-optimizer-license-headers"]
  },
  "compressors": {
    "*.js": ["...", "@parcel/compressor-gzip"]
  },
  "reporters": ["...", "parcel-reporter-manifest"]
}

强大的插件

import {Transformer} from '@parcel/plugin';

export default new Transformer({
  async transform({asset}) {
    let source = await asset.getCode();
    let sourceMap = await asset.getMap();

    let {code, map} = compile(source, sourceMap);
    asset.setCode(code);
    asset.setMap(map);

    return [asset];
  }
});

Parcel 为所有内容提供插件。事实上,Parcel 核心是完全与语言无关!从转换文件到解析依赖关系,再到捆绑和优化 - 一切都是可定制的。

每种插件类型都有一个为其目的而设计的特定且定义明确的 API。所有对象和方法都有完整文档,并包含 TypeScript 定义,用于自动完成和类型安全。

在开发插件时,它甚至会在您保存时热重载,而无需从头开始重新运行构建!这使得调试和迭代变得非常快。它甚至适用于 node_modules 中的依赖项!

了解更多 →

命名管道

想要在单个构建中以多种方式转换相同类型的文件?创建一个命名管道,并在代码中将其用作 URL 方案。

例如,您可以将捆绑包的编译内容内联为文本、数据 URL、ArrayBuffer 或其他任何内容!或者,如果您正在构建文档站点,您可以同时导入生成的 API 文档和文件的源代码。可能性是无限的。

了解更多 →
.parcelrc
{
  "extends": "@parcel/config-default",
  "transformers": {
    "buffer:*": ["...", "parcel-transformer-buffer"]
  }
}
App.js
import buffer from 'buffer:./logo.png';

专为性能而设计

Parcel 的插件系统从一开始就以性能为目标进行设计。插件会自动跨多个线程并行化,并与 Parcel 的缓存集成。您的插件使用的任何依赖项或配置都会自动跟踪并使构建失效。

了解更多 →

API

使用 Parcel 的 API 将 Parcel 集成到任何现有的构建系统中,该 API 允许您以编程方式执行构建。

了解更多 →

诊断

所有 Parcel 插件都使用统一的诊断格式,支持突出显示的代码框架、丰富的 Markdown 格式、提示和文档链接。

了解更多 →

由开源驱动。

Parcel 是一个开源项目,由来自世界各地的公司和个人的代码和财务贡献提供支持。

🥇 金牌赞助商

金牌赞助商每月向 Parcel 捐赠 1,000 美元或更多。

🥈 银牌赞助商

银牌赞助商每月向 Parcel 捐赠 500 美元或更多。

🥉 铜牌赞助商

铜牌赞助商每月向 Parcel 捐赠 100 美元或更多。

💵 支持者

支持者已向 Parcel 捐赠了任何金额。 成为支持者 →

😍 贡献者

贡献者帮助修复 Parcel 中的错误并实施新功能。 成为贡献者 →