适合我们其他人的构建工具。
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 快速刷新 和 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 转换器和压缩器是在 Firefox 中使用的浏览器级 CSS 解析器之上用 Rust 构建的。 它比其他基于 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 的配置格式,它使用通配符来匹配源文件以构建管道。 你可以扩展默认配置并添加插件来处理自定义文件类型,或者覆盖和扩展默认设置。
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.
{"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 集成到任何现有的构建系统中,这允许你以编程方式执行构建。
了解更多 →诊断
所有 Parcel 插件都使用统一的诊断格式,支持突出显示的代码框架、丰富的 Markdown 格式、提示和文档链接。
了解更多 →