isabella232 / awesome-parcel

🔗 A curated list of awesome Parcel resources, libraries, tools and boilerplates

Awesome Parcel

A curated list of Parcel plugins, articles, etc.

Ecosystem

• Website
• Documentation
• Repository
• Twitter
• Slack

Contents

• Examples
• Plugins
  • Templates
  • Frameworks
  • JavaScript dialects, other languages
  • Other
• Integration with other languages, frameworks
• Articles
  • English
  • Portuguese
  • Russian
  • French
  • Chinese

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.

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

• Svelte - Svelte support.
• Angular - Angular support.

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.
• Shebang - Add a shebang to the output files (useful for CLI applications).
• data-src - Bundles resources defined in data-srcset and data-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 and fetch 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.

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

• Parcel Bundler: Criando um projeto React

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.