website·Indexed 42 days ago
https://parceljs.org/A zero-config web application bundler featuring a development server with hot reloading, scope hoisting, and a robust plugin system. Parcel provides out-of-the-box support for HTML, CSS, TypeScript, Vue.js, and various preprocessors like Sass, Less, and Stylus, as well as specialized transformers for GLSL and GraphQL.
Parcel 2 is designed as a small core that orchestrates a series of plugins to handle the bundling process. Most applications can use the default configuration, but the core behavior can be extended or overridden using the following plugin types:
import './foo') into full file paths.Validator plugins are used to validate assets (e.g., for linting or typing issues). They run after a build has fully completed to avoid impacting compilation performance.
Behavior differs by mode:
Validator plugins are used to validate assets (e.g., for linting or typing issues) after a build has fully completed to avoid impacting compilation performance.
Behavior varies by mode:
Note: The Validator API is experimental and subject to change.
Parcel 2 is a zero-configuration web bundler designed for scalability and extensibility. Key features include:
@parcel/transformer-stylus plugin, which is installed automatically when a .styl file is detected. Compiled Stylus files are processed like CSS, meaning they are compiled for browser targets and processed by any configured PostCSS plugins. To use CSS modules with Stylus, use the .module.styl file extension.pages (a list of all pages) and currentPage (metadata about the current page) as props to the entry component to facilitate site navigation.export default function Page({pages, currentPage}) {
return (
<html>
<head>
<title>{currentPage.name}</title>
</head>
<body>
<nav>
{pages.map(page => (
<a href={page.url}>{page.name}</a>
))}
</nav>
</body>
</html>
);
}<link> element into the HTML <head> so the stylesheet loads in parallel with the script. Similarly, shared bundles (e.g., React or Lodash used across multiple pages) are split into separate bundles and loaded via additional <script> tags to optimize loading.react-error-overlay package. The overlay provides a UI with inline code frames for runtime errors. To improve performance, the dev server now handles source map parsing and stack trace mapping in Rust via an internal endpoint, reducing browser-side network round trips and processing. Additionally, the overlay now supports displaying errors from React Server Components and provides colorized diffs for React hydration errors.mdx-rs. It processes images and links in both Markdown and JSX syntax. When used with React Server Components, Parcel can automatically extract a table of contents and metadata from static exports.Starting with Parcel v2.15.0, a new HTML transformer and minifier implemented in Rust (using the html5ever parser) is used by default. This ensures browser-grade parsing and more conservative, correct minification.
.posthtmlrc file is present, it will still be applied.htmlnano configuration options.htmlnano specifically, add @parcel/optimizer-htmlnano to your .parcelrc configuration.