Building a Simple, Babel-Enabled Website with Parcel
In this post, we’ll generate a simple website using the Parcel web application build system. Parcel has a lot of the capabilities like Webpack and Browserify in that Parcel can build up your Javascript dependency tree, uglify and do other postprocessing steps to get your web application ready to deploy.
So if there’s Webpack and Browserify, why bother with Parcel? Well, Parcel really shines when you just want to quickly get to building web application and and not fussing with worrying about hundreds of lines of configuration code just to get started. Parcel has automatic code transforms for ES6, CSS and HTML that older browsers don’t support, hot module replacement and more with no config files. In other words,
Parcel. Just. Works.
Install the CLI
So let’s get started. Parcel utilizes a CLI tool for handling builds. You’ll need NodeJS version 7+. You can check your node version by running
$ node --version
Next, install the CLI. If you’re using yarn for dependency management
$ yarn global add parcel-bundler
If you’re using NPM, install parcel with
$ npm install -g parcel-bundler
If you already have parcel installed, check that your version is >=1.6
$ parcel --version
//Should be 1.6 or higher
Setup package.json
Next, setup your package.json file using
$ yarn init -y
or
$ npm init -y
Create your entrypoint
Parcel works on a concept of an entrypoint file. Parcel will navigate the entry file and follow links, collecting resources which are then output to a dist folder by default. The entrypoint file can be any type, but the common approach is to point to a root html file that has a relative patch reference to the main JavaScript file.
Let’s setup create our index.js and index.html files.
index.html
<!DOCTYPE Html>
<html>
<head>
<title>Parcel Example</title>
</head>
<body>
<div class="message"></div>
<script src="./index.js"></script>
</body>
</html>
index.js
const main = () => {
document.querySelector(".message").innerHTML = "Hello with Parcel";
};
main();
This creates an HTML5 file and links to our index.js file. The index.js on load calls the main function to load our “Hello” message into the DOM. For the sake of simplicity, we won’t worry about grouping these into folders or the project layout.
Let’s run it.
Running the parceled project
Running the project is easy, just use the parcel CLI and point to your index.html entrypoint.
$ parcel index.html
Open up a browser to localhost:1234 to view your code
If you have a backend server that parcel should connect to, you can use the included parcel development server that will automatically build without running a server. It can be run usingthe watch mode:
$ parcel watch index.html
Enabling Babel Transforms
Notice in the index.js that we used an ES6 arrow function which isn’t supported in older Internet Explorer browsers. To provide support, we’ll use BabelJS .
First, we’ll need to install the presets and plugins. For yarn, add:
$ yarn add babel-preset-env
and for npm add:
$ npm install babel-preset-env
Next, edit your package.json and add a "babel" entry:
{
"name": "tmp",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-preset-env": "^1.6.1"
},
"babel": {
//Babel configuration here, could also be in .babelrc file
"presets": [["env", {
"targets": {
"browsers": ["ie 8"]
}
}]]
}
}
We’re using Babel’s presets options which are already configured sets of Babel plugins. We add an option for the preset env that specifies that we want to target support for Internet Explorer 8 using the browserslist format.
Rerun parcel index.html to download and install the babel plugins and build the newly transformed JavaScript.
For more details, see Parcel Transforms doc
Leave a Comment