When it comes to web application bundling, there’s a new kid on the block and that’s . ParcelJS is a relatively new that was launched sometime around October, last year. Parcel describes itself as a blazing fast, zero- web application bundler.

Parcel is based on the premise that building apps with JavaScript bundlers could be easier. Wepback is arguably the most popular bundler out there right now, it’s an awesome tool that gives you the power of configurability but sometimes all you need is a minimal tool that helps you get started as soon as possible.

This is where Parcel comes in. It touts itself as a fast bundle tool with zero configuration, all you need to is just point it at the entry point of your application, and it does the right thing. Parcel offers the following features:

  • Blazing fast bundle times – Parcel has a considerably faster time than other bundling tools out there. Below is a screenshot of the Parcel page on Github.
  • Assets Bundling – Parcel has out of the box support for JS, CSS, HTML, file assets.
  • Automatic transforms – All your code are automatically transformed using Babel, PostCSS, and PostHTML.
  • Code Splitting – Parcel allows you to split your output bundle by using the dynamic import() syntax.
  • Hot module replacement (HMR) – Parcel automatically updates modules in the browser as you make changes during development, no configuration needed.
  • Error Logging – Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem.

One other thing to note about Parcel is that it allows developers to use an index.html file as an entry point as opposed to JS modules.

Getting Started With Parcel

Let’s get right into it and see how Parcel works. Create a new working directory and install Parcel by running the command below in your terminal.

npm install -g parcel-bundler

The next thing to do is create a package.json file in your directory. You can do this by running the command below.

npm init -y

That generates a working package.json for you.

As mentioned above, Parcel can take any type of file as it’s entry point but an HTML or JavaScript file is a good place to start. If you link your main JavaScript file in the HTML using a relative , Parcel will also process it for you. Let’s create the index.html and index.js file now.

index.html

<html>
<body>
  <script src="http://scotch.io/./index.js"></script>
</body>
</html>

index.js

console.log("hello world");

So now that we have the files, how do we run the app? One of the many cool things about Parcel is that, it comes with a development server built in which will automatically rebuild your app as you change files and supports hot module replacement for fast development. To run the app, run the terminal command below:

parcel index.html

You can now open http://localhost:1234/ in your browser and check the console for the output in the console.

Parcel and

That’s all there is to get started. Next, let’s actually setup a React project with Parcel. Before we go on, we’ll need to install some dependencies.

npm i react
npm i react-dom

The dependencies above will help to install React and react-dom in our application. Since React is written in ES6, we’ll need a way to transform the code. Parcel does that for you with no need for configs, all you have to do is install the presets and Parcel does all the heavy lifting for you.

npm i babel-preset-env babel-preset-react --save-dev

Once that’s done, create a .babelrc file and edit it with the following:

{
  "presets": ["env", "react"]
}

Now Babel is configured to transform ES6/ES7 JavaScript into a meaningful JavaScript bundle for browsers.

Let’s begin to create the React app and its components. Open up the index.html file and replace it with the code below.

<!DOCTYPE html>
<html>
<head>
    <title>React starter app</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
</head>
<body>
<div id="app"></div>
<script src="http://scotch.io/./src/index.js"></script>
</body>
</html>

Next up, create a folder titled src and in it create an index.js file and edit it with the following.

import React from "react";
import ReactDOM from "react-dom";
import Header from './components/Header'

class HelloMessage extends React.Component {
    render() {
        return <div>
            <Header/>
            <div className="container">
                <h1>Hello {this.props.name}</h1>
            </div>
        </div>
    }
}

let App = document.getElementById("app");

ReactDOM.render(<HelloMessage name="Yomi" />, App);

This is a basic React starting app, the HelloMessage component will be rendered in the index.html file in the div with an id of app.

Let’s create the Header component too. Create a component folder and in it, create a JS file titled Header.js and edit it with the code below.

import React from 'react'
import ParcelLogo from "../img/parcel-logo.svg";

const Header = () => (
    <header>
        <nav className="navbar" role="navigation" aria-label="main navigation">
            <div className="navbar-brand">
                <a className="navbar-item" href="/">
                    <img width="120" src={ParcelLogo} alt=""/>
                </a>
            </div>
        </nav>
    </header>
)

export default Header

As you can see above, Parcel also supports import of assets like images. One more thing to note is that, Parcel also ships with SCSS support. All you need to do is install node-sass, which can be done with the terminal command below.

npm i node-sass

Once you have node-sass installed you can import SCSS files from JavaScript files. In your index.js file, add the line of code below to the top of the file to import an SCSS file.

index.js

import './scss/app.scss'

Let’s also create the app.scss file. Create a folder titled scss and create a file titled app.scss and edit it with the following.

body {
  background-color: #fefefe;
  text-align: center;
  .navbar {
    background: #21374B;
    color: #E7DACB;
    height: 50px;
  }
  h1 {
    font-size: 40px;
    margin-top: 30px;
  }
}

Now that we’re done setting up the React app, let’s run it and see if it works. To do that, we’ll need to start a dev server and configure our package.json. Add the line of code below to the package.json file.

"scripts": {
    "start": "parcel index.html"
  },

This means that, whenever we run the npm start command, we are telling Parcel to start a development server using the index.html file as a entry file. Run the npm start command and you can now view the React app at http://localhost:1234 with support for hot module reloading.

Building for Production

To prepare your app for production with Parcel, all you need to do is run the command parcel build .... Let’s add that to the scripts object in the package.json file.

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

Once you run the npm run build command, Parcel disables watch mode and hot module replacement so it will only build once. It also enables the minifier for all output bundles to reduce file size. The build command also enables production mode which also sets the NODE_ENV=production environment variable.
Parcel also gives you some options in which you can use to choose how your app is prepared for production mode.

Change output directory
If you’d prefer another directory for Parcel to put the production files in (dist is the default directory), you can specify that by appending --out-dir directory-name at the end of the build key in package.json so it looks like this:

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --out-dir directory-name"
  },

Disable minification
If for some weird reasons, you’d like to disable minification which is the default setting, you can do that by appending --no-minify at the end of the build key in package.json so it looks like this:

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --no-minify"
  },

Disable filesystem cache
If you’d like to disable filesystem caching, you can do that by appending --no-cache at the end of the build key in package.json so it looks like this:

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --no-cache"
  },

You can read more about the different options here.

Conclusion

In this tutorial, we’ve seen how Parcel makes web app bundling looks with features like zero config and fast bundling time.
Parcel is still relatively new and its support keeps growing in numbers every day. Its use case might be different from Webpack but it’s a bundle tool that can be considered in your everyday web development.

You can check out the Parcel repo here to see issues and submit PRs.

The codebase for this tutorial can also be seen here.



Source link
thanks you RSS link
( https://scotch.io/tutorials/setting-up-a-react-project-with-parcel)

LEAVE A REPLY

Please enter your comment!
Please enter your name here