A build tool for the rest of us.
Parcel starts with a great development experience, from starting a new project, to iterating and debugging, and shipping to production. No more fiddling with configuration, or spending hours to keep up with best practices – it just works!
Zero config
只要一个 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>
Dev server
Parcel 内置了一个开箱即用的开发服务器。只需运行 parcel index.html
即可开始使用。
需要 HTTPS? 运行 Parcel 时指定 --https
参数即可,它会自动为您生成证书!或者,如果你愿意,也可以使用自己的证书。
Parcel 还内置了 API 代理,有助于模拟生产环境。
了解更多 →Hot reloading
当您编辑代码时,Parcel 会自动更新浏览器中显示的内容,并且无需重新加载页面!
import React from 'react';
export function Greeting() {
return <h1>Hello world!</h1>;
}
Parcel 还集成了 React Fast Refresh 和 Vue Hot Reloading API ,可在每次更新之间自动保留应用程序的状态。这样,您在编辑代码时就能获得即时反馈,而不会丢失上下文。
了解更多信息 →Diagnostics
如果您的代码或配置出错,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 使用工作线程并行构建代码,充分利用机器上的所有 CPU 内核。所有内容都会被缓存,因此您永远不会重复编译相同的代码。就像使用监视模式一样,即使重新启动 Parcel 也能保留状态!
平台原生性能
Parcel 的 JavaScript 编译器、CSS 转换器和源码映射(source map)功能都是使用 Rust 实现的,能够实现最高性能。比其它使用 JavaScript 编写的工具快 10-20 倍!
Parcel 的 JavaScript 编译器基于 SWC,可处理 JavaScript、JSX 和 TypeScript 的转译。在 SWC 的基础上,Parcel 还实现了依赖关系收集、打包、作用域提升(scope hoisting)、tree shaking、Node 仿真、热重载等功能。
Parcel 的 CSS 转换器和精简器(minifier)是基于 Firefox 所使用的浏览器级 CSS 解析器基础上采用 Rust 实现的。它比其他采用 JavaScript 编写的转换器和精简器(minifier)快 100 倍以上。。
多核利用
Parcel 采用多核架构设计,能够利用所有内核并行工作,充分利用最新硬件的优势。
单个源文件的转换、打包以及优化都是并行的。所有这一切都是完全自动的,不需要插件作者或其他与 Parcel 集成的工具做任何工作。
可靠的缓存
Parcel 执行的所有工作都是被缓存的, 包括转换、依赖关系解析、打包、优化以及中间的所有工作。这意味着开发服务器能够立即重新启动,而且相同的代码不会构建两次。
Parcel 可自动跟踪构建过程中涉及的所有文件、配置、插件和开发依赖项,并在发生变化时细粒度地使缓存失效。它与操作系统的底层 API 相集成,无论项目大小如何,都能在几毫秒内确定哪些文件发生了变化。
延迟构建
在开发过程中,Parcel 可以推迟文件的构建,直到收到浏览器的请求。 这意味着您只有您实际正在处理的页面被构建!如果您的项目有很多入口或代码分割点,这将大大减少开发服务器的启动时间。
当您请求一个页面时,Parcel 会立即智能地找出该页面的所有依赖并进行构建,而无需等待这些依赖被浏览器请求,因此不会出现大量网络请求同时爆发!
了解更多 →自动针对生产环境进行优化。
Parcel 会自动优化您的整个应用程序,使其适合生产环境。这些优化包括对 JavaScript、CSS 和 HTML 进行 tree-shaking 和精简(minifying),调整图片大小并进行优化,content hashing,自动代码拆分等。
Tree shaking
Parcel supports tree-shaking both ES modules and CommonJS out of the box! It statically analyzes the imports and exports of each module, and removes everything that isn't used.
Tree shaking even works across dynamic import()
boundaries, shared bundles, and even across languages! If you use CSS modules, unused classes will be removed automatically.
import {add} from './math';
console.log(add(2, 3));
export function add(a, b) {
return a + b;
}
export function square(a) {
return a * a;
}
Minification
Parcel includes minifiers for JavaScript, CSS, HTML, and SVG out of the box! Just run parcel build index.html
, and your whole application will be built and optimized automatically.
Image optimization
Parcel supports resizing, converting, and optimizing images! Just pass query parameters for the format and size you need when referencing the image file in your HTML, CSS, JavaScript, etc. and Parcel will take care of the conversion and optimization process.
You can even request multiple sizes or formats of the same source image for different devices or browsers!
Learn more →<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>
Compression
Compress your app before you deploy using Gzip and Brotli.
Learn more →Code splitting
When multiple parts of your application depend on the same common modules, they are automatically deduplicated into a separate bundle. This allows commonly used dependencies to be loaded in parallel with your application code and cached separately by the browser!
Code splitting is also supported for CSS. If you import CSS from your JavaScript, a sibling CSS bundle will be produced and loaded in parallel with the JS bundle.
Learn more →Content hashing
Parcel automatically includes content hashes in the names of all output files. This enables long-term browser caching, because the output is guaranteed not to change unless the name does.
Parcel also resolves all referenced bundles relative to their parent using a manifest in each entry. This means that changes to referenced bundles don't invalidate the cache for their parents as well, and output files can be moved between locations without rebuilding.
Learn more →Ship for any target.
Parcel automatically transforms your code for your target environments. From modern and legacy browser support, to zero config JSX and TypeScript compilation, Parcel makes it easy to build for any target – or many!
Transpilation
Parcel transpiles your JavaScript and CSS for your target browsers automatically! Just declare a browserslist
in your package.json
, and Parcel takes care of transpiling only what's needed.
In addition to standard JavaScript, Parcel automatically handles JSX, TypeScript, and Flow, along with Node.js features like process.env and fs.readFileSync – no configuration needed!
When it comes to CSS, Parcel supports transpiling modern syntax features like lab()
colors, logical properties, and CSS nesting syntax, as well as automatically adding the necessary vendor prefixes for your browser targets.
And if you need more advanced control, or support for custom transforms, just add a .babelrc
or .postcssrc
and it'll be picked up automatically.
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"
);
}
Differential bundling
When you use <script type="module">
, Parcel automatically generates a nomodule
fallback for old browsers as well, depending on your browser targets.
This results in much smaller bundles for a majority of users in modern browsers, while still supporting older browsers as well!
Learn more →<script type="module" src="app.js"></script>
<script type="module" src="app.c9a6fe.js"></script>
<script nomodule="" src="app.f7d631.js"></script>
Workers
Parcel supports web workers, service workers, and worklets out of the box! Just use the standard browser APIs and Parcel will automatically follow the dependency.
It even generates native ES module workers when possible, depending on your browser targets!
Learn more →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'}
);
Libraries
Parcel can build libraries for multiple targets at once! For example, your source code can be compiled to a modern ES module, a legacy CommonJS module, and a TypeScript definition file all automatically. Just add the relevant fields to your package.json
and Parcel takes care of the rest.
You can even build a whole monorepo of packages in a single command! 🤯 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"
}
Scalable from small websites to massive applications.
Parcel requires zero configuration to get started. But as your application grows and your build requirements become more complex, it's possible to extend Parcel in just about every way.
Simple configuration?!
Configuring Parcel is like a breath of fresh air. .parcelrc
is a simple JSON-based config format that uses globs to match your source files to build pipelines. You can extend the default config and add plugins to handle custom file types, or override and extend the defaults.
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"]
}
Powerful plugins
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 has a plugin for everything. In fact, Parcel core is completely language agnostic! From transforming files, to resolving dependencies, to bundling and optimizing – everything is customizable.
Each plugin type has a specific, well defined API designed for its purpose. All objects and methods are fully documented, and include TypeScript definitions for autocomplete and type safety.
As you're developing a plugin, it even hot reloads as you save without needing to re-run your build from scratch! This makes it super fast to debug and iterate. It even works with dependencies in node_modules
!
Named pipelines
Want to transform the same types of files in multiple ways in a single build? Create a named pipeline, and use it as a URL scheme in your code.
For example, you could inline the compiled contents of a bundle as text, a data URL, an ArrayBuffer, or anything else! Or if you're building a documentation site, you could import both the generated API docs and source code for a file. The possibilities are endless.
Learn more →{
"extends": "@parcel/config-default",
"transformers": {
"buffer:*": ["...", "parcel-transformer-buffer"]
}
}
import buffer from 'buffer:./logo.png';
Designed for performance
Parcel's plugin system has been designed from the ground up with performance in mind. Plugins are automatically parallelized across multiple threads, and integrated with Parcel's cache. Any dependencies or configs your plugin uses are automatically tracked and invalidate the build.
Learn more →API
Integrate Parcel into any existing build system using Parcel's API, which allows you to perform builds programmatically.
Learn more →Diagnostics
All Parcel plugins use a unified diagnostic format that supports highlighted code frames, rich Markdown formatting, hints, and documentation links.
Learn more →