Parcel, a popular webPack-like front-end build tool, is getting a lot of attention recently. This library has only been out for a few days, but it is very popular, as you can see from the picture below.

So it’s worth checking out!

Official address: https://parceljs.org/

Making address: https://github.com/parcel-bundler/parcel

Before we get into this library, let’s look at some of the things THAT I personally think are bad about WebPack (as opposed to Parcel).

  1. You need to write a configuration file (webpack.config.js), maybe add a configuration every time you use a feature like loading an image or CSS, and maintain a configuration file that Parcel doesn’t need.

  2. It can be a bit slow to compile or load, especially if you have a lot of libraries or complex projects. There are some code splitting methods, such as CommonsChunkPlugin or DLLPlugin, but they are a bit complicated.

  1. It takes some time to learn how to use WebPack.

Parcel has the advantage of not using a configuration file, which means you just write the code and it runs automatically. It’s smart. For example, if you want to deal with CSS in WebPack, you have to install and load a CSS loader, and then the configuration file will write a few lines. There’s just Parcel waiting for you. There’s just a Parcel waiting to learn.

Parcels are also available for hot replacement and code splitting, and if you want to write a React runtime environment using parcels, you may not need to configure anything, just install a few react packages.

Having said all that, I would like to post the official summary of its features:

Stay close as we begin our experience of Parcel’s wonders. I (source code on https://github.com/hfpp2012/hello-parcel)

1. Install

$ npm install -g parcel-bundler
Copy the code

Then initialize a project.

$ mkdir parcelapp
$ npm init
Copy the code

2. The early experience

Create a new HTML file. (This will be the parcel entry file)

index.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>Joke Generator</title>
</head>
<body>
  <div id="wrap">
    <h1>Joke</h1>
    <h3 id="joke"></h3>
  </div>
  <p id="copy"></p>
  <script src="./index.js"></script>
</body>
</html>
Copy the code

index.js

console.log('Hello');
Copy the code

Run the compile command.

$ parcel index.html
Copy the code

Note: The above parcel command accepts an HTML file. It reads the contents of the HTML file, finds the javascript file, and performs the parcel operation without specifying the javascript entry file as webpack does.

The dist directory is generated.

Dist ├── index.html ├── parcelapp.jsCopy the code

Listen on port 1234 and the browser will look like this:

3. CommonJS module syntax

Create a new file brums.js.

jokes.js

module.exports = {
  getOne: function () {
    return new Promise((resolve, reject) = > {
      // The API is public.
      fetch('http://api.icndb.com/jokes/random')
        .then(res= > res.json())
        .then(data= >{ resolve(data.value.joke); }}})})Copy the code

index.js

const jokes = require('./jokes');

jokes.getOne()
  .then(joke= > {
    document.getElementById('joke').innerHTML = joke;
  });
Copy the code

The effect is as follows:

4. ES6 module syntax

Change require to import, as shown below:

index.js

// const jokes = require('./jokes');

import { jokes } from './jokes';

jokes.getOne()
  .then(joke= > {
    document.getElementById('joke').innerHTML = joke;
  });
Copy the code

jokes.js

export const jokes = {
  getOne: function () {
    return new Promise((resolve, reject) = > {
      fetch('http://api.icndb.com/jokes/random')
        .then(res= > res.json())
        .then(data= >{ resolve(data.value.joke); }}})})Copy the code

5. UseaxiosReplace the fetch

This is just to demonstrate the use of some libraries.

First install AxiOS.

$ npm install axios
Copy the code

Note that every time you install a library, you rerun parcel index.html

jokes.js

import axios from 'axios';

export const jokes = {
  getOne: function() {
    return new Promise((resolve, reject) => {
      axios.get('http://api.icndb.com/jokes/random') .then(res => { resolve(res.data.value.joke); }}})})Copy the code

6. Use jquery instead of getElementById

$ npm install jquery
Copy the code

index.js

import { jokes } from './jokes';
import $ from 'jquery';

jokes.getOne()
  .then(joke= > {
    // document.getElementById('joke').innerHTML = joke;
    $('#joke').text(joke);
  });
Copy the code

7. Import non-javascript resources

copyright.txt

Copyright 2018
Copy the code

index.js

import fs from 'fs'; . const copy = fs.readFileSync(__dirname +'/copyright.txt'.'utf8');

$('#copy').text(copy);
Copy the code

8. Simplify CSS

style.css

h1 {
  color: red;
  padding-right: 1rem;
}

#wrap {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 5px;
  border: 1px solid # 333;
  border-radius: 4px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.12);
}
Copy the code

index.html


      
<html lang="en">
<head>.<link rel="stylesheet" href="style.css" />
  <title>Joke Generator</title>
</head>
<body>.</body>
</html>
Copy the code

9. Use import in CSS

backgrounds.css

body {
  background: #f4f4f4;
}
Copy the code

style.css

@import './backgrounds.css'; .Copy the code

10. Use sass

First, install Node-Sass.

$ npm install node-sass
Copy the code

This is going to take a while, so please be patient

backgrounds.scss

Note: Here we changed the name from habit.css to habit.scss

@import './variables.scss';

body {
  background: $light-grey;
}
Copy the code

variables.scss

$light-grey: #f4f4f4;
Copy the code

style.css

SCSS */
@import './backgrounds.scss'; .Copy the code

Parcel has lots of fun to do, we’ll talk about it later.