Home > Article > Web Front-end > Detailed explanation of Parcel packaging example

Detailed explanation of Parcel packaging example

小云云Original: 2018-01-16 13:20:222384browse

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. I hope it can help everyone.

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 require configuration. 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

npm init -y

The package.json file will be created at this time. 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

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"
+   "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

npm start

Open http://localhost:1234

in the browser and the packaging process will produce There are two directories, .cache and dist. If it is a git project, you can create a new .gitignore file to ignore these two directories:

.cache
dist
node_modules

GitHub address: https://github.com /justjavac/parcel-example/tree/master/react-helloworld

Related recommendations:

Packaging tool parcel zero-configuration vue development scaffolding

Parcel.js and Vue 2.x Extremely fast zero-configuration packaging experience example

Detailed explanation of nodejs to implement simple gulp packaging

The above is the detailed content of Detailed explanation of Parcel packaging example. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Imitation Taobao JSsearch search drop-down in-depth usage analysisNext article：Imitation Taobao JSsearch search drop-down in-depth usage analysis

See more

Detailed explanation of Parcel packaging example

Related articles