After webpack another package artifact parcel

Objective:

After grunt, gulp to achieve automation, Webpack also lead the front-end packaging trends, it is well known that VUE-CLI scaffolding is based on the Webpack project packaging. While Webpack is still rising momentum, another package artifact turned out--parcel.

Parcel Fast, 0 configured WEB application features

Quick Pack

　　　　Parcel uses worker processes to enable multi-core compilation and has a file system cache that can be rebuilt quickly even after a reboot.
Package All Resources
Parcel supports js,css,html, file resources, and so on-no plug-ins need to be installed.
Automatic conversion
When needed, the code uses BABEL,POSTCSS and posthtml to convert automatically-even if it is node_modules.
0 Configuring code splitting
Parcel uses the dynamic import () syntax to split your output package, so it loads only what is needed when the initial load is loaded.
Module Hot Swap
When you make changes in the development process, Parcel automatically updates the modules in the browser without any configuration required.
Friendly error logging
When an error is encountered, Parcel will print the code frame as a syntax highlight to help you pinpoint the problem.

Why use parcel?

There are now many Web application packaging tools, including Webpack and browserify. So why do we need one? The main reason is around the developer's experience.

Many packaging tools are built around configurations and plug-ins, so it is not uncommon to see applications with more than 500 lines of configuration running correctly. This configuration is cumbersome and time-consuming, and it is difficult to get the correct configuration, which must be replicated for each application. Typically, this may cause a sub-optimized application to be sent to the production environment. Parcel is designed to be zero-configured: it can do the right thing as long as it points to the entry point of your application.
Most of the existing packaging tools are slow to execute, and large applications with many files and dependencies will take a few minutes to build, which will be quite painful over time. Monitoring file changes can help recompile, when the initial build is usually slow. Parcel uses modern multi-core processing capabilities and worker threads to compile your code in parallel. This results in an enormous increase in the speed of the initial build. It also has a file system cache that can hold the compilation results for each file for faster subsequent startup.
Finally, the existing packaging tools are built around the string load/transform, where the transformation requires a string, parses it, then makes some transformations, and then generates the code again. Often this eventually leads to many parsing and code generation running on a single file, which is inefficient. Instead, the parcel conversion works on the AST, so each file has a parse, multiple transformations, and a code generation.

How does the Parcel work?

Parcel convert the resource tree into a packet (bundles) tree. Many other packaging tools are basically based on JavaScript resources, as well as resources attached to other formats. For example, inline into a string in a JS file. Parcel is not aware of file types, it works with any type of resource the way you expect it, and it doesn't have to be configured.
Building a resource tree
Parcel accepts a single portal resource as input, which can be any type: JS, HTML, CSS, picture files, and so on. Many different resource types are defined in Parcel, and it knows how to handle specific file types. Resources are parsed, resource dependencies are extracted, and resources are converted into the final compiled form. This procedure creates a resource tree.
Building a File Bundle tree
Once the resource tree is built, the resource is placed in the file bundle tree. First a portal resource is created as a file bundle, and then the dynamic import () is created as a sub-file bundle, which causes the code to be split. When different types of file resources are introduced, the sibling file bundle is created. For example, if you introduce a CSS file in JavaScript, it will be placed in a sibling file bundle that corresponds to a JavaScript file. If a resource is referenced by more than one file bundle, it is promoted to the nearest common ancestor of the file China, so that the resource is not packaged more than once.
Packaged
After the file bundle tree is built, each file bundle is packager written to a file of a specific file type. Packagers knows how to merge the code from each resource into a file that will eventually be loaded by the browser.
[PS: Based on the https://parceljs.org/of the official website]

Getting Started Demo

First, the initialization of NPM

NPM Init

Second, add Babel and install babel-preset-env dependent

1. Create a new. babelrc file

{  "presets": [    "env"  ]}

2. Installation dependencies

NPM Install babel-preset-env--save-dev

Third, add parcel

NPM Install Parcel-bundler--save-dev

Four, the last generated Package.json file is probably this:

{  "name": "Parcel-demo",  "version": "1.0.0",  "description": "Parcel",  "main": "Index.js",  " Scripts ": {    " test ":" Echo \ "Error:no test specified\" && exit 1 ",    " start ":" Parcel index.html "  },
     "keywords": [    "Parcel"  ],  "author": "Aaron",  "license": "ISC",  "Devdependencies": {    "Babel-cli": "^6.26.0",    "babel-preset-env": "^1.6.1",    "Parcel-bundler": "^1.2.0"  }}

[PS: Add a Startup entry to NPM:

"Start": "Parcel index.html"

]

Finally, according to the official website new Index.html,index.js and other files, and then the command line packaging, and then run NPM start or parcel index.html start, a simple demo is generated.

Index.html/index.js/main.js/main.css

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Hello Parcel</title></Head><Body><H1class= "Main">Parcel</H1><Scriptsrc= "./js/index.js"></Script></Body></HTML>

Import main from './main '; main ();

Import classes from '. /css/main.css 'default () ={    console.log (classes);}

. Main {    background: URL (".. /images/parcel.png ");     color:red;}

：

More

　　

If the above errors are reported. It looks like the node. JS 7.6 version is not supported for Await/async, so you'll need to upgrade the node. JS version when you do packaging.

Parcel Chinese official website: http://www.parceljs.io/

Parcel Github:https://github.com/parcel-bundler/parcel

More on the use of parcel also need to understand, every packaging tool I feel that has its unique charm.

Looking forward to the development of parcel ...

　　

After webpack another package artifact parcel