Recently, I have often seen them mention Parcel in some Daniel blogs, and I paid attention to it subconsciously. The introduction of Parcel's official website is relatively simple. I saw an introductory blog on the official website and translated it.
We've all experienced the pain of creating React projects that take hours to configure Webpack before we can actually code.
The Create React App open source project makes it easier and faster to create React projects, but the problem is that create react app does a lot of webpack configuration itself. When the project gets bigger and needs to use some advanced features, it is necessary to abandon create react app and manually configure webpack step by step. Then back to the problem of learning webapck.
Recently a new packaging tool was born - Parcel - known as a zero-configuration packaging tool. This sounds too good to be true, because if it were, it would solve most problems in development.
I tested it on a large codebase and it worked out of the box! It even bundled me an extremely optimized bundle, and it would take me days to type out the same optimized bundle using webpack.
I think it's cool and has potential, let's create a React app from scratch.
Create React Apps with Parcel
Step 1: Create an npm project.
mkdir react-parcel
cd react-parcel
npm init
npm init will ask you a series of questions, just hit enter to skip setting default options.
Step 2: Add React, Babel and Parcel dependencies.
npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-env
npm install --save-dev parcel-bundler
Step 3: Create the .babelrc file, which tells Parcel that we are using ES6 and React JSX.
{
"presets": ["env", "react"]
}
Step 4: Create the React project, which only contains two files.
index.js
import React from "react";
import ReactDOM from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
index.html
<!DOCTYPE html>
<html>
<head>
<title>React starter app</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
Step 5: Add the script script in package.json to start our application.
"scripts": {
"start": "parcel index.html",
},
Step 6: Launch the app
npm start
Make sure your node version is greater than or equal to 8.0.0, then you can enter http://localhost:1234 in the browser to see the content of the application.
think
Comparing it, using parcel to create a react application and using webpack to create a react application, parcel is not generally simple.
Parcel looks like a good choice for creating React projects, but is it suitable for build packaging of large applications? This one is uncertain right now, we have to understand how things are going, and the only thing is for sure: it's going to be a lot of fun!
Give it a try!
Parcel is great! But don't just believe my one-sided words, give it a try, and feel the charm of it for yourself!
(End of translation)
**Talking about my feelings: **I ran the small demo again, the process is indeed much simpler, .babelrc is not a parcel configuration, it can indeed be said to be zero configuration, and even makes me feel that this is the end? But to say how sharp it is, I can't see it now, and I look forward to the follow-up development!
Finally, the author's information is attached:
Original blog address: http://blog.jakoblind.no/ Parcel official website address: https://parceljs.org/