parcel

Parcel is a Web application packaging tool for developers with varying experience. It takes advantage of multi-core processing to provide extremely fast speed and requires no configuration.

content

DevSever and dynamic update deployment steps are not implemented in the tutorial.

This article implements Parcel based packaging with very few configuration items, and the React development environment is hot updated in real time as an extension of the tutorial on the official website.

Install dependencies

npm init -y
npm install babel-preset-react react react-dom react-hot-loader react-router
npm install --dev parcel-bundler
Copy the code

Configuration items

package.json

Select the root file to start the project

"scripts": {
    "start": "parcel src/index.html"."build": "rm -rf dist && parcel build src/index.html"
  }
Copy the code

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>Document</title>
</head>
<body>
    <div id="container"></div>
    <script src="./main.js"></script>
</body>
</html>
Copy the code

.babelrc

{
    "presets": [
        "react"]."plugins": [
        "react-hot-loader/babel"]}Copy the code

main.js

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

const App = (a)= >(<div >hello world</div>)

const HTMLContainer = document.getElementById('container')

ReactDOM.render(<App/>,HTMLContainer);
Copy the code

The directory structure

Start the

npm start
Copy the code

You can experience React.

Project Warehouse Address

Github.com/zjcwill/hot…