为我们其他人提供的构建工具。
Parcel 从出色的开发体验开始,从启动新项目到迭代和调试,再到发布到生产环境。不再需要费力地配置,也不需要花费数小时来跟上最佳实践——它可以正常工作!
零配置
从 HTML 文件开始。添加一个 <script>
标签。也许还有一些 CSS。怎么样,TypeScript?SASS?图像?没问题。Parcel 可以像您预期的那样开箱即用。
Parcel 开箱即用地支持多种语言和文件类型,从 HTML、CSS 和 JavaScript 等 Web 技术到图像、字体、视频等资产。当您使用默认情况下未包含的文件类型时,Parcel 将 自动安装所有必要的插件和开发依赖项!
开始使用 →<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 会自动在浏览器中更新您的代码——无需重新加载页面!
import React from 'react';
export function Greeting() {
return <h1>Hello world!</h1>;
}
Parcel 还与 React Fast Refresh 和 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 使用工作线程并行构建您的代码,利用您机器上的所有核心。所有内容都已缓存,因此您永远不会两次构建相同的代码。这就像使用监视模式,但即使您重新启动 Parcel 也是如此!
原生性能
Parcel 的 JavaScript 编译器、CSS 变换器和源映射实现是用 Rust 编写的,以实现最佳性能。它比其他基于 JavaScript 的工具 快 10-20 倍!
Parcel 的 JavaScript 编译器基于 SWC,它处理 JavaScript、JSX 和 TypeScript 的转译。在 SWC 之上,Parcel 实现了依赖项收集、捆绑、范围提升、树形摇动、Node 模拟、热重载等。
Parcel 的 CSS 变换器和缩小器是在 Rust 上构建的,它基于 Firefox 中使用的浏览器级 CSS 解析器。它比其他基于 JavaScript 的变换器和缩小器 快 100 倍以上。
多核
Parcel 是围绕多核架构设计的,该架构将工作并行化到所有核心,并充分利用现代硬件。
变换单个源文件以及打包和优化输出捆绑包都是并行化的。所有这些都是完全自动的,不需要插件作者或与 Parcel 集成的其他工具进行任何工作。
可靠的缓存
Parcel 执行的所有操作都已缓存——变换、依赖项解析、捆绑、优化以及介于两者之间的所有操作。这意味着开发服务器会立即重启,并且永远不会两次构建相同的代码。
Parcel 会自动跟踪构建中涉及的所有文件、配置、插件和开发依赖项,并在发生更改时以细粒度方式使缓存失效。它与低级操作系统 API 集成,以毫秒为单位确定哪些文件已更改,无论项目大小如何。
延迟开发构建
在开发中,Parcel 可以延迟构建文件,直到它们在浏览器中被请求。这意味着您只需要等待您实际正在处理的页面构建!如果您的项目包含许多条目或代码拆分点,这可以大大减少开发服务器启动时间。
当您请求页面时,Parcel 足够聪明,可以立即构建该页面的所有依赖项,而无需等待它们也被请求——没有网络瀑布!
了解更多 →自动生产优化。
Parcel 会自动优化整个应用程序以用于生产。这包括树形摇动和缩小您的 JavaScript、CSS 和 HTML,调整图像大小和优化图像,内容哈希,自动代码拆分等等。
树形摇动
Parcel 开箱即用地支持树形摇动 ES 模块和 CommonJS!它会静态分析每个模块的导入和导出,并删除所有未使用的内容。
树形摇动甚至可以在动态 import()
边界、共享捆绑包甚至跨语言之间工作!如果您使用 CSS 模块,未使用的类将被自动删除。
import {add} from './math';
console.log(add(2, 3));
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 就会处理转换和优化过程。
您甚至可以为不同的设备或浏览器请求同一源图像的多个大小或格式!
了解更多 →<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 捆绑包并行加载。
了解更多 →内容哈希
Parcel 会自动在所有输出文件的名称中包含内容哈希。这使 长期浏览器缓存成为可能,因为除非名称发生变化,否则输出保证不会发生变化。
Parcel 还使用每个条目中的清单解析所有引用的捆绑包相对于其父级的路径。这意味着对引用捆绑包的更改不会使父级的缓存失效,并且输出文件可以在位置之间移动而无需重新构建。
了解更多 →为任何目标发布。
Parcel 会自动将您的代码转换为目标环境。从现代和传统浏览器支持到零配置 JSX 和 TypeScript 编译,Parcel 使为任何目标(或多个目标)构建变得容易。
转译
Parcel 会自动为您的目标浏览器转译您的 JavaScript 和 CSS!只需在您的 package.json
中声明一个 browserslist
,Parcel 就会处理仅转译所需的内容。
除了标准 JavaScript 之外,Parcel 还自动处理 JSX、TypeScript 和 Flow,以及 Node.js 功能,如 process.env 和 fs.readFileSync——无需配置!
在 CSS 方面,Parcel 支持转译现代语法功能,如 lab()
颜色、逻辑属性和 CSS 嵌套语法,以及自动为您的浏览器目标添加必要的供应商前缀。
如果您需要更高级的控制或对自定义变换的支持,只需添加一个 .babelrc
或 .postcssrc
,它会自动被拾取。
function DogName(props) {
return (
<span>
{props.dog?.name ?? 'Buddy'}
</span>
);
}
function DogName(props) {
var ref, ref1;
return /*#__PURE__*/ React.createElement(
"span",
null,
(ref1 = (ref = props.dog) === null || ref === void 0 ? void 0 : ref.name) !== null && ref1 !== void 0 ? ref1 : "Buddy"
);
}
差异捆绑
当您使用 <script type="module">
时,Parcel 会自动为旧浏览器生成一个 nomodule
回退,具体取决于您的浏览器目标。
这会导致 更小的捆绑包,适用于现代浏览器中的大多数用户,同时仍然支持旧浏览器!
了解更多 →<script type="module" src="app.js"></script>
<script type="module" src="app.c9a6fe.js"></script>
<script nomodule="" src="app.f7d631.js"></script>
工作线程
Parcel 开箱即用地支持 Web 工作线程、服务工作线程和 工作线程!只需使用标准的浏览器 API,Parcel 就会自动跟踪依赖项。
它甚至会根据您的浏览器目标生成 原生 ES 模块工作线程!
了解更多 →let worker = new Worker(
new URL('./worker.js', import.meta.url),
{type: 'module'}
);
navigator.serviceWorker.register(
new URL('./sw.js', import.meta.url),
{type: 'module'}
);
库
Parcel 可以为多个目标同时构建库!例如,您的源代码可以自动编译为现代 ES 模块、传统 CommonJS 模块和 TypeScript 定义文件。只需将相关字段添加到您的 package.json
,Parcel 就会处理其余工作。
您甚至可以在单个命令中构建整个包的单一存储库!🤯 parcel build packages/*
{
"name": "my-great-library",
"version": "1.0.0",
"source": "src/index.js",
"module": "dist/module.js",
"main": "dist/main.js",
"types": "dist/types.d.ts"
}
从小型网站到大型应用程序,可扩展性强。
Parcel 不需要任何配置即可开始使用。但是,随着应用程序的增长和构建需求变得更加复杂,您可以通过几乎所有方式扩展 Parcel。
简单的配置?!
配置 Parcel 就像呼吸新鲜空气一样。.parcelrc
是一种简单的基于 JSON 的配置格式,它使用 glob 来匹配您的源文件以构建管道。您可以扩展默认配置并添加插件来处理自定义文件类型,或者覆盖和扩展默认值。
扩展
从默认配置或社区预设开始。
变换器
编译单个源文件并提取依赖项。
解析器
解析对文件路径或虚拟模块的依赖关系。
命名器
确定输出文件的名称。
打包器
将多个资产合并到单个输出文件中。
优化器
压缩、优化和转换输出文件。
压缩器
压缩并以多种格式编码输出文件。
报告器
接收构建进度和完成的事件。
{"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 文档和文件的源代码。可能性是无限的。
了解更多 →{
"extends": "@parcel/config-default",
"transformers": {
"buffer:*": ["...", "parcel-transformer-buffer"]
}
}
import buffer from 'buffer:./logo.png';
专为性能而设计
Parcel 的插件系统从一开始就以性能为目标进行设计。插件会自动跨多个线程并行化,并与 Parcel 的缓存集成。您的插件使用的任何依赖项或配置都会自动跟踪并使构建失效。
了解更多 →API
使用 Parcel 的 API 将 Parcel 集成到任何现有的构建系统中,该 API 允许您以编程方式执行构建。
了解更多 →诊断
所有 Parcel 插件都使用统一的诊断格式,支持突出显示的代码框架、丰富的 Markdown 格式、提示和文档链接。
了解更多 →由开源驱动。
Parcel 是一个开源项目,由来自世界各地的公司和个人的代码和财务贡献提供支持。
💵 支持者
支持者已向 Parcel 捐赠了任何金额。 成为支持者 →
😍 贡献者
贡献者帮助修复 Parcel 中的错误并实施新功能。 成为贡献者 →