Parcel

October 18, 2018

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

With Yarn

code

yarn global add parcel-bundler
yarn init -y

or with NPM

code

npm install -g parcel-bundler
npm init -y

code

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

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

code

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

Create a .babelrc and add your plugins

code

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

code

yarn add sass

import your Sass file in one of the JS files

code

import "../styles/main.scss";

code

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

code

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

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

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

code

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

code

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

code

// .htmlnanorc
{
  minifySvg: false;
}