Why?

• Simpler to use than Webpack
• Has a built-in live dev server, with hot module replacement
• Let’s you create and use modules with import and export
• Babel works right out of the box
• Live reloading works with HTML, CSS and JS
• Buils your projcect for you, default build directory is dist. You can change it with --out-dir
• Build code gets automatically compiled and minified

Getting started

With Yarn

yarn global add parcel-bundler
yarn init -y

or with NPM

npm install -g parcel-bundler
npm init -y

Setting up scripts in package.json

  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html --out-dir prod"
  },

Babel config

Parcel uses Babel @babel/preset-env to convert JavaScript for you. You can easily add more Babel plugis to the config and they’ll work with Parcel

yarn add @babel/plugin-proposal-class-properties

Create a .babelrc and add your plugins

{
	"plugins": [
		"@babel/plugin-proposal-class-properties"
	]
}

CSS and Sass

yarn add sass

import your Sass file in one of the JS files

import '../styles/main.scss'

Parcel and React

yarn add react react-dom
yarn add --dev parcel-bundler

// package.json
"scripts": {
  "start": "parcel index.html"
}

Parcel vs. SVGs

• issue 1: Parcel is stripping (inline) <svg> sprite out of an HTML doc when running build
• issue 2: Parcel is nesting <svg> code, i.e. nesting paths and groups inside one another when they are supposed to be siblings, not parent-child

Inline SVG

Parcel by default doesn’t support inline <svg>. You can either use fs.readFileSync to load the file, or use a plugin like parcel-plugin-inlinesvg

yarn add parcel-plugin-inlinesvg

That plugin didn’t work. It replaced the <img> with the .svg files with some .js code that failed to load.

What did work was adding two config files for PostHTML and htmlnano that disabled minification of svgs and some stuff about tags

// .posthtmlrc
{
  "recognizeSelfClosing": true,
  "lowerCaseAttributeNames": false
}

// .htmlnanorc
{
  minifySvg: false
}

Links

• Getting Started