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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1657
14
1415
52
1309
25
1257
29
1229
24
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
Declaration of Independence for Python Applications: PyInstaller's Road to Freedom
Feb 20, 2024 am 09:27 AM
PyInstaller: Independence of Python applications PyInstaller is an open source python packaging tool that packages Python applications and their dependencies into an independent executable file. This process eliminates dependence on the Python interpreter while allowing applications to run on a variety of platforms, including Windows, MacOS, and Linux. Packaging Process The packaging process of PyInstaller is relatively simple and involves the following steps: pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile option creates a single
Detailed explanation of VSCode functions: How does it help you improve work efficiency?
Mar 25, 2024 pm 05:27 PM
Detailed explanation of VSCode functions: How does it help you improve work efficiency? With the continuous development of the software development industry, developers' pursuit of work efficiency and code quality have become important goals in their work. In this process, the choice of code editor becomes a key decision. Among many editors, Visual Studio Code (VSCode for short) is loved by the majority of developers for its powerful functions and flexible scalability. This article will introduce some functions of VSCode in detail and discuss
How to correctly understand the differences between packaging and compression in Linux
Feb 20, 2024 pm 05:33 PM
Packaging and compression are commonly used operations in Linux, but many users tend to confuse the two concepts. This article will discuss the differences between packaging and compression in Linux systems in detail, and use specific code examples to help readers better understand. First, we need to clarify the difference between packaging and compression. Packaging is the combination of multiple files or directories into a single file, often used to organize, archive, or transfer files. Compression is to compress one or more files through an algorithm to reduce the size of the file, save storage space or speed up the transmission.
PyCharm Tutorial: How to package Python code into an EXE file
Feb 21, 2024 pm 12:12 PM
In this article, we will introduce a common method in PyCharm to package Python code into an executable EXE file by using PyInstaller. PyInstaller is a tool for converting Python applications into independent executable files. It can package Python code into EXE, APP, Linux and other formats, making it convenient for users to run Python programs in environments that do not have a Python interpreter installed. Step 1: Install PyIn
Vue.js vs. React: Project-Specific Considerations
Apr 09, 2025 am 12:01 AM
Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.
Introduction to Maven project packaging steps: step-by-step implementation of project packaging and release
Feb 21, 2024 pm 02:15 PM
Introduction to Maven project packaging steps: To implement project packaging and release step by step, specific code examples are required. With the continuous development of the software development industry, Maven, as an excellent project management tool, plays an important role in project construction. Maven can not only help us manage project dependencies, but also package and release the project through a series of instructions. This article will briefly introduce the steps of Maven project packaging and provide specific code examples to help readers have a deeper understanding and mastery of Maven project packaging.
