Home > Article > Web Front-end > How to package using Parcel

How to package using Parcel

亚连Original: 2018-06-11 17:26:441908browse

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

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

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.

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!

node.js json css easyui html npm postcss yarn JS github git http https

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：Detailed answer: What impact do changes in Vue have on components?Next article：Detailed answer: What impact do changes in Vue have on components?

See more

How to package using Parcel

Related articles