Parcel

using Parcel as a simpler Webpack, scripts, Babel config, Sass, React, and the trouble it gave me with inline SVG sprites

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

1yarn global add parcel-bundler
2yarn init -y

or with NPM

1npm install -g parcel-bundler
2npm init -y

Setting up scripts in package.json

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

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

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

Create a .babelrc and add your plugins

1{
2	"plugins": [
3		"@babel/plugin-proposal-class-properties"
4	]
5}

CSS and Sass

1yarn add sass

import your Sass file in one of the JS files

1import '../styles/main.scss'

Parcel and React

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

1// package.json
2"scripts": {
3  "start": "parcel index.html"
4}

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

1yarn 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

1// .posthtmlrc
2{
3  "recognizeSelfClosing": true,
4  "lowerCaseAttributeNames": false
5}

1// .htmlnanorc
2{
3  minifySvg: false
4}

Links

• Getting Started