Parcel Packaging Features
Speedy packing time
Parcel uses the worker process to enable multi-core compilation. There is also a file system cache, which can be recompiled quickly even after restarting the build.
Package all your resources
Parcel has out-of-the-box support for JS, CSS, HTML, files and more, and does not require plugins.
Automatic conversion
If necessary, Babel, PostCSS, PostHTML and even node_modules packages will be used to automatically convert code.
Configuration code split
Using the dynamic import() syntax, Parcel splits your output bundles, so you only need to load the code you need on the first load.
Hot module replacement
Parcel does not require configuration, and it will automatically update modules in the browser as your code changes during the development environment.
Friendly error log
When an error is encountered, Parcel will output syntax-highlighted code snippets to help you locate the problem.
useParcel Packaged React HelloWorld app. GitHub address:/justjavac/parcel-example/tree/master/react-helloworld
0. Create a new directory
mkdir react-helloworld cd react-helloworld
1. Initialize npm
yarn init -y
or
npm init -y
At this time, the file to be given, the file content will be created:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2. Add React
yarn：
yarn add react react-dom
npm:
npm install react react-dom --save
File content:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0"
+ }
}
3. Add Babel
Create a new .babelrc file
touch .babelrc
Enter content:
{
"presets": ["react"]
}
Add babel-preset-react:
yarn：
yarn add babel-preset-react -D
npm:
npm install babel-preset-react --D
At this time the file content:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
- }
+ },
+ "devDependencies": {
+ "babel-preset-react": "^6.24.1"
+ }
}
5. Add Parcel
yarn：
yarn add parcel-bundler -D
npm:
npm install parcel-bundler --D
At this time the file content:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
- "babel-preset-react": "^6.24.1"
+ "babel-preset-react": "^6.24.1",
+ "parcel-bundler": "^1.0.3"
}
}
6. Create a new file
content
<html> <body> <div ></div> <script src="./"></script> </body> </html>
7. Create a new file
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return <h1>Hello World!</h1>;
};
(<App />, ("root"));
8. Add a package command
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "parcel "
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-preset-react": "^6.24.1"
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.0.3"
}
}
9. Completed
run
yarn start
or
npm start
Open in the browser http://localhost:1234
The packaging process will produce two directories, .cache and dist. If it is a git project, you can create a new .gitignore file and ignore these two directories:
.cache dist node_modules
GitHub address:/justjavac/parcel-example/tree/master/react-helloworld
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.