Parcel

零配置构建工具,适用于
  • Web
  • JavaScript
  • CSS
  • HTML
  • TypeScript
  • React
  • 图片
  • SASS
  • SVG
  • Vue
  • Less
  • CoffeeScript
  • Node
  • Stylus
  • Pug
  • Electron
  • Elm
  • WebGL
  • 扩展
  • GraphQL
  • MDX
  • XML

Parcel 将出色的开箱即用开发体验与可扩展架构相结合,可以使你的项目从刚刚开始到大规模生产应用。

新手入门

适合我们其他人的构建工具。

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 快速刷新Vue 热重载 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 的配置格式,它使用通配符来匹配源文件以构建管道。 你可以扩展默认配置并添加插件来处理自定义文件类型,或者覆盖和扩展默认设置。

了解更多 →

Extends

Start with the default config, or a community preset.

Transformers

Compile individual source files and extract dependencies.

Resolvers

Resolve a dependency to a file path or virtual module.

Namers

Determine the name of an output file.

Packagers

Combine multiple assets together into a single output file.

Optimizers

Minify, optimize, and transform output files.

Compressors

Compress and encode output files in multiple formats.

Reporters

Receive events on build progress and completion.

.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 集成到任何现有的构建系统中,这允许你以编程方式执行构建。

了解更多 →

诊断

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

了解更多 →