Detailed explanation of Parcel packaging example-JS Tutorial-php.cn

Detailed explanation of Parcel packaging example

小云云

Release： 2018-01-16 13:20:22

Original

2398 people have browsed it

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

Copy after login

1. Initialize npm

yarn init -y

Copy after login

npm init -y

Copy after login

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

Copy after login

2. Add React

yarn:

yarn add react react-dom

Copy after login

npm:

npm install react react-dom --save

Copy after login

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

Copy after login

3. Add Babel

New .babelrc file

touch .babelrc

Copy after login

Input content:

{
 "presets": ["react"]
}

Copy after login

Add babel-preset-react:

yarn:

yarn add babel-preset-react -D

Copy after login

npm:

npm install babel-preset-react --D

Copy after login

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

Copy after login

5 . Add Parcel

yarn:

yarn add parcel-bundler -D

Copy after login

npm:

npm install parcel-bundler --D

Copy after login

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

Copy after login

6. Create a new index.html file

Content

<html>
<body>
  <p id="root"></p>
  <script src="./index.js"></script>
</body>
</html>

Copy after login

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"));

Copy after login

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

Copy after login

9. Complete

Run

yarn start

Copy after login

npm start

Copy after login

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

Copy after login

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!