Getting started ES2015 with Parcel

Goal

Create a ES2015 project with Parcel

Step 1: Add package.json file and initialize it

1
yarn init -y

Step 2: Add parcel

1
yarn add parcel-bundler -D

Step 3: Create a src directory and add files follow

  • index.html
  • script.js
  • style.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="foo">foo</div>

    <script src="./app.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
// script.js

import "./style.scss";

const foo = () => console.log(`foo`);

foo();
1
2
3
4
5
6
7
// style.scss

$red: tomato;

.foo {
  color: $red;
}

parcel

Step 4: Add scripts to package.json file

1
2
3
4
5
6
7
8
// package.json

...
  "scripts": {
    "start": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html"
  }
...

Step 5: Run scripts

yarn start

References