Home > Article > Web Front-end > How to package using Parcel
This article mainly introduces the Parcel packaging example (React HelloWorld), and introduces the characteristics and usage examples of Parcel packaging in detail. If you are interested, you can learn about it
Parcel packaging features
Extremely fast packaging time
Parcel uses worker processes to enable multi-core compilation. There is also a file system cache to enable fast recompiling even after restarting the build.
Package all your resources
Parcel has out-of-the-box support for JS, CSS, HTML, files and more, and no plugins are required.
Automatic conversion
If necessary, Babel, PostCSS, and PostHTML and even the node_modules package will be used to automatically convert the code.
Configuring code splitting
Using dynamic import() syntax, Parcel splits your output file bundles (bundles), so you only need to load the code you need on the initial load.
Hot module replacement
Parcel does not need to be configured. In the development environment, the module will be automatically updated in the browser as your code changes.
Friendly error log
When an error is encountered, Parcel will output a code snippet with syntax highlighting to help you locate the problem.
React HelloWorld application packaged using Parcel. GitHub address: https://github.com/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 package.json file will be created. The file content is:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"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
package.json File content:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"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
New .babelrc file
touch .babelrc
Input 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 package.json file content:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"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
The content of the package.json file at this time:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"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 index.html file
Content
<html> <body> <p id="root"></p> <script src="./index.js"></script> </body> </html>
7. Create a new index.js file
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById("root"));8. Add packaging command
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "parcel index.html"
},
"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. Complete
Run
yarn start
or
npm start
and open http://localhost:1234
in the browser. The packaging process will produce two directories, .cache and dist. If For git projects, you can create a new .gitignore file and ignore these two directories:
.cache dist node_modules
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement the image cropping and uploading function of vue through js in cropper
How to implement the function of cropping pictures and uploading to the server in vue
How to solve the actual compatibility of easyui date and time box ie Question (detailed tutorial)
Explain in detail the practical skills in Immutable and React
How to use readline in Node.js to achieve line-by-line Read and write file contents
The above is the detailed content of How to package using Parcel. For more information, please follow other related articles on the PHP Chinese website!