Awesome Parcel
A curated list of Parcel plugins, articles, etc.
Ecosystem
Contents
Examples
- Preact Boilerplate - A minimal Preact boilerplate project, powered by Parcel.
- Parcel-Tsx-Template - A Simple Parcel Template With React & Typescript.
- Element UI - Minimal Vue Element UI Parcel template.
- React - Minimum viable React app.
- React with SSR - React starter app including Server Side Rendering and code splitting.
- React with TypeScript - Example code and test cases with React, TypeScript, Jest.
- React + TypeScript + CSS Modules + SASS - Boilerplate to create a webapp with: React + TypeScript + CSS Modules + SASS.
- Angular - Angular boilerplate.
- Vue.js - Basic
Hello, World!
example. - Vue.js with Vuex and Vue Router - Quickstart example including Code Splitting, Hot Reloading, Vuex, Vue Router and Less.
- Metal.js - Simple example with Metal.js.
- ReasonReact - Simple Reason React app.
- PixiJS with Typescript - Simple PixiJS starter app.
- Dart - Simple
Hello, World
example. - AWS IoT Button logger to git - A beginner-friendly AWS Lambda function that logs events from IoT devices into a git repository of your choice. Written in TypeScript, tested with Jest, compiled with Parcel into a single file. The project uses Azure Pipelines as CI.
- Phaser 3 with Parcel - Simple Phaser game template.
- Parcel Github Pages Boilerplate - Boilerplate to automatically publish to Github Pages through Github Actions.
- Parcel Start - Simple starter template for plain web sites.
Plugins
Templates
- Pug - Pug template support.
- Markdown - Plugin for markdown support.
- Markdown String - Plugin for markdown string support.
- Markdown with Frontmatter - Plugin for markdown with frontmatter support.
- Mustache - Plugin for Mustache template support.
- Nunjucks - Plugin to compile Nunjucks templates.
- Handlebars - Plugin to compile handlebars templates.
- Handlebars precompile - Plugin to precompile handlebars templates into template functions.
- Protobuf - Plugin to compile Protocol Buffer binary protocol schemas with pbf.
- Protobuf-ts - Plugin to load Protocol Buffer schemas with pbf and generated TypeScript types and extensions.
Frameworks
JavaScript dialects, other languages
- TypeScript - Enhanced TypeScript integration.
- BuckleScript - Plugin that enables BuckleScript support
- Elm - Plugin that enables Elm support.
- LiveScript - Plugin for LiveScript support.
- Emscripten - Plugin for Emscripten support.
- Fable - Enable F# support via Fable + Babel.
- Dart - Plugin for Dart support via dart2js
Other
- ESLint - Plugin for ESlint support.
- Bundle Manifest - Plugin for generating a bundle manifest.
- AppCache - Plugin for generating an appcache manifest.
- parcel-plugin-sw-cache - Run workbox-build after every build.
- Inline SVG - Plugin that enables inline svg support. (deprecated)
- SVGR - Plugin that imports svgs as components.
- SVG Sprite - Plugin that generates a sprite of imported svg files.
- Wrapper - Plugin that wraps output files with custom text or code.
- Url-Loader - Plugin that enables convert image to base64 in
js
/css
. - css-url-loader - Plugin that enables convert image to base64 in
css
. - Google Closure - Plugin that uses Google Closure compiler to minify and tree-shake JavaScript.
- Image minification - Plugin that uses imagemin to minify images on build
- Bundle Visualiser - Plugin to visualise bundle contents (the parcel version of webpacks webpack-bundle-analyzer)
- css to style object import css as object
- SW Precache Plugin to generate a service worker file that will precache resources so they work offline. (PWA)
- PWA Manifest Plugin that creates a web app manifest, generating a full icon set from a single image, and inserts links into the HTML for use in PWAs.
- react-native-web - Plugin that enables react-native-web support.
- web-extension - Plugin that enables to use a WebExtension
manifest.json
as an entry point. - Static Files Copy - Plugin that copies static files into bundle directory.
- Inliner - Inlines all your CSS, JS and images in a single HTML file. Great for small websites.
- PurifyCSS - Removes unused selectors from your CSS files using PurifyCSS.
- PurgeCSS - Removes unused selectors from your CSS files using PurgeCSS.
- Modernizr - Generates a custom modernizr build
- Watch Reload - Watches files outside of parcel bundles and sends a reload request to parcel if they change
- HTML Interpolation - Interpolation plugin that gives you option to use your .env variable inside HTML
- Static ZIP - Provide archived local directory in the static build. Useful for BrowserFS.
- parcel-plugin-shebang - Add a shebang to the output files (useful for CLI applications).
- data-src - Bundles resources defined in
data-srcset
anddata-src
HTML attributes. - compress - Precompresses (gzip, brotli) build output with @gfx/zopfli and brotli
- parcel-plugin-text Load any asset as text
- structurize Customize output (dist) directory folder structure.
- parcel-plugin-run-server Start (and restart) a node server while running in watch mode.
- parcel-plugin-prerender Drop-in universal pre-rendering.
- parcel-plugin-ogimage Set absolute URL for og:image meta tags.
- parcel-plugin-graphql-raw Export GraphQL files as plain text.
- parcel-plugin-goodie-bag Automatically polyfill
Promise
andfetch
for Internet Explorer (11) support of importing HTML. - parcel-plugin-subresource-integrity Adds Subresource
integrity
attributes to the HTML entry point for CSS and JS assets. - CSS Modules Plugin to generate
.d.ts
(TypeScript type definitions) files for your CSS Modules, powered by @Quramy/typed-css-modules. - parcel-plugin-overwolf Plugin that enables use of Overwolf's
manifest.json
- code obfuscation Plugin that uses
javascript-obfuscate
to obfuscate javascript code of entry assets. - Linaria CSS-in-JS Plugin to use Linaria library.
- parcel-plugin-codgen - Allows to generate modules on the fly, i.e., a Node.js solution for metaprogramming modules.
- parcel-plugin-externals - Adds the ability to omit specified dependencies from the generated bundle(s), e.g., by referencing global variables.
- parcel-plugin-nuke-dist - Wipes the
dist/
directory before compiling a new bundle. - parcel-plugin-marked-prismjs - Plugin for using prismjs plugins in md files.
Integration with other languages, frameworks
- parcel-rails - Ruby On Rails gem, for easier integration into Rails applications
- karma-parcel - Let parcel bundle your tests that karma should run
Articles
English
- Announcing Parcel: A blazing fast, zero configuration web application bundler
- Parcel Bundler with React and Hot Module Replacement
- Code Splitting with Parcel Web App Bundler
- Parcel: A Zero-Configuration Webpack Alternative - Get started with Parcel in 20 minutes(video)
Portuguese
Russian
- Parcel — очень быстрый бандлер, не требующий настройки - Parcel quick review.
- Parcel — пишем плагин - How to write a Parcel plugin.
French
- Parcel - Présentation - Parcel review (video)
- Parcel - Changer le bundler de Phoenix - Integration in a framework
Chinese
- 下一代零配置打包工具 Parcel 初体验 - Quick view of the next generation bundler Parcel
- Parcel 教程?不需要。 - You don't need a tutorial for Parcel since it's so easy
Contribute
Contributions welcome! Read the contribution guidelines first.
License
To the extent possible under law, Maksim Karelov has waived all copyright and related or neighboring rights to this work.