为开发者打造的构建工具。
Parcel 从一开始就致力于提供卓越的开发体验,从项目初始化到迭代、调试,再到生产部署。不再需要繁琐的配置,也不必花费大量时间跟进最佳实践 - 一切都能顺利运行!
零配置
从一个 HTML 文件开始。添加一个 <script>
标签。也许还有一些 CSS。想用 TypeScript?SASS?图像?没问题。Parcel 开箱即用,完全符合你的预期。
Parcel 开箱即用地支持多种语言和文件类型,从 HTML、CSS 和 JavaScript 等 Web 技术,到图像、字体、视频等资源。当你使用默认不支持的文件类型时,Parcel 会自动安装所有必要的插件和开发依赖!
开始使用 →<html>
<head>
<title>我的第一个 Parcel 应用</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>你好,世界!</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>你好世界!</h1>;
}
Parcel 还集成了 React 快速刷新和 Vue 热重载 API,可以在更新之间自动保留应用程序状态。这让你在进行更改时能获得即时反馈,不会打断你的工作流程。
了解更多 →诊断
如果你的代码或配置中出现错误,Parcel 会在终端和浏览器中显示精美的诊断信息。
每个错误都包含语法高亮的代码框架,精确指出错误发生的位置,并附带如何修复问题的提示。
许多诊断信息甚至还包含文档链接,帮助你进一步了解。
$ parcel index.html
服务器运行在 http://localhost:1234
🚨 构建失败。
@parcel/core: 无法从 './index.js' 解析 'ract'
/dev/app/index.js:1:19
> 1 | import React from 'ract';
> | ^^^^^^
2 |
3 | function Test() {
@parcel/resolver-default: 找不到模块 'ract'
你是不是想输入 'react'?
It's lightning fast.
Parcel builds your code in parallel using worker threads, utilizing all of the cores on your machine. Everything is cached, so you never build the same code twice. It's like using watch mode, but even when you restart Parcel!
Native performance
Parcel's JavaScript, CSS, HTML, and SVG compilers are written in Rust for maximum performance. These are 10-100x faster than other JavaScript-based tools!
Parcel's JavaScript compiler is built on SWC, which handles transpiling JavaScript, JSX, and TypeScript. On top of SWC, Parcel implements dependency collection, bundling, scope hoisting, tree shaking, Node emulation, hot reloading, and more.
Parcel's CSS transformer and minifier is built in Rust on top of the browser-grade CSS parser used in Firefox. It's over 100x faster than other JavaScript-based transformers and minifiers.
Multi-core
Parcel is designed around a multi-core architecture that parallelizes work across all of your cores and takes full advantage of modern hardware.
Transforming individual source files is parallelized, as well as packaging and optimizing output bundles. All of this is completely automatic and does not require any work by plugin authors or other tools that integrate with Parcel.
Reliable caching
Everything Parcel does is cached – transformation, dependency resolution, bundling, optimizing, and everything in between. This means the dev server restarts instantly, and the same code is never built twice.
Parcel automatically tracks all of the files, configuration, plugins, and dev dependencies that are involved in your build, and granularly invalidates the cache when something changes. It integrates with low-level operating system APIs to determine what files have changed in milliseconds, no matter the project size.
Lazy dev builds
In development, Parcel can defer building files until they are requested in the browser. This means you only need to wait for the page you're actually working on to build! If your project has many entries or code split points, this can massively reduce dev server startup time.
And when you do request a page, Parcel is smart enough to eagerly build all of the dependencies of that page at once, without waiting for them to be requested as well – no network waterfalls!
Learn more →Automatic production optimization.
Parcel optimizes your whole app for production automatically. This includes tree-shaking and minifying your JavaScript, CSS, and HTML, resizing and optimizing images, content hashing, automatic code splitting, and much more.
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-jsx"] },
"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 →Powered by open source.
Parcel is an open source project, powered by code and financial contributions from companies and individuals around the world.
💵 Backers
Backers have donated any amount of money to Parcel. Become a backer →
😍 Contributors
Contributors help fix bugs and implement new features in Parcel. Become a contributor →