Using Parcel as a Bundler for React Applications

Webpack isn't the only game in town for asset management. Parcel offers a compelling alternative, providing streamlined asset bundling with zero configuration. Unlike other bundlers that demand extensive setup code, Parcel's simplicity is a major advantage. Its speed is also noteworthy, leveraging multicore processing for significantly faster build times compared to more complex bundlers.

Key features and benefits of Parcel include:

• Efficient code splitting via dynamic imports.
• Versatile asset handling for various file types, including HTML, CSS, and JavaScript.
• Hot Module Replacement (HMR) for rapid development without constant page refreshes.
• Clear error highlighting in the console for easier debugging.
• Support for environment variables to manage development and production settings.
• Optimized production mode for faster builds by eliminating unnecessary steps.

This article demonstrates how to build a React project using Parcel, showcasing an alternative to Create React App. Let's explore a different approach to React development.

Project Setup

1. Create Project Directory:

mkdir csstricks-react-parcel && cd $_

2. Initialize package.json: Use either npm or Yarn:

# npm
npm init -y

# Yarn (used in this tutorial)
yarn init -y

3. Install Dependencies: Install Parcel and Babel locally:

yarn add parcel-bundler babel-preset-env babel-preset-react --dev
yarn add react react-dom

4. Configure Babel: Create a .babelrc file with the following content:

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

5. Create index.js (App Component):

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <react.fragment><h2 id="Hello">Hello!</h2></react.fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<app></app>, rootElement);

6. Create index.html (in src directory):

  <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>Parcel React Example</title>


  <div id="root"></div>

7. Configure package.json (start script):

"scripts": {
  "start": "NODE_ENV=development parcel src/index.html --open"
}

8. Run the Application: Execute yarn start in your terminal. The app should launch in your browser at http://localhost:1234/.

Styling with Sass

Parcel includes PostCSS. To use Sass, install the necessary packages:

yarn add --dev node-sass autoprefixer

Configure package.json's postcss section (if needed):

"postcss": {
  "modules": false,
  "plugins": {
    "autoprefixer": {
      "browsers": [">1%", "last 4 versions", "Firefox ESR", "not ie 
<h3 id="Production-Build">Production Build</h3>
<p>Configure your <code>package.json</code> for production builds:</p>
<pre class="brush:php;toolbar:false">"scripts": {
  "start": "NODE_ENV=development parcel src/index.html --open",
  "build": "NODE_ENV=production parcel build dist/index.html --public-url ./ "
}

Run yarn build to create a production-ready build in the dist folder. Options like --out-dir, --no-minify, and --no-cache offer further customization.

CRAP (Create React App Parcel)

Create React App Parcel (CRAP) simplifies project setup:

npx create-react-app-parcel my-app
cd my-app
yarn start

Conclusion

Parcel's ease of use and optimized build times make it a strong contender for your next React project. Its growing popularity (30,000 GitHub stars) speaks to its community acceptance.

Resources

• Parcel Examples
• Awesome Parcel

GitHub repository for this tutorial's source code (link to be provided).

The above is the detailed content of Using Parcel as a Bundler for React Applications. For more information, please follow other related articles on the PHP Chinese website!