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

7. Create a new index.js file

import React from "react"; import ReactDOM from "react-dom"; const App = () => { return 
Hello World!
; }; ReactDOM.render(, 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

There are differences between mutations and actions in Vuex What's the difference? (Detailed tutorial)

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!