what is parcel

There are videos in the article, and it is recommended to watch them on wifi and use a computer

In order to upload video, found their server bandwidth is not good, special card, and then get the OSS, found that OSS is very cheap ah!!

Parcel is parcel. The first thing to realize is that Parcel does much the same thing as WebPack, only much more. Previously appeared in the official website similar to “out of the box”, “0 configuration packaging” and other words, it seems to be a flagship simple packaging tool.

I used gulp, Grunt, Webpack, browserify and Fis as packaging tools, but when I found out there was a parcel it really took a different approach. In Webpack, JS is the “first class citizen”, as we can see from the webPack configuration entry file is JS. But the fact that parcel can use AN HTML file as an entry file is pretty cool for me, since I’ve always believed that HTML should be the first file that the user or client receives, and that the rest of the file is either directly or indirectly imported from the HTML file.

parcel’s Features

🚀 Fast Parcel – Use the worker process to enable multi-core compilation. It also has a file system cache, allowing fast recompilation even after a restart build.

đŸ“Ļ Pack all your resources — Parcel comes with out-of-the-box support for JS, CSS, HTML, files and more, and no plug-ins required.

🐠 automatic conversion – Babel, PostCSS, and PostHTML and even node_modules packages can be used to automatically convert code if needed.

✂ī¸ Zero configuration code splitter – Using the dynamic import() syntax, Parcel splits your output bundles so you only need to load the code you need at first load.

đŸ”Ĩ Hotmodule replacement – Parcel requires no configuration and automatically updates modules in the browser as your code changes while developing your environment.

🚨 friendly error log — When you encounter errors, Parcel outputs syntax-highlighted snippets of code to help you locate the problem.

At the end of the page, parcel also posts how fast it packs compared to other packing tools.

If anyone feels the same way I do, I resist writing a complete webapck configuration and then packing it up to see what it really looks like when I need to test or get familiar with a library (maybe someone says they have a simple configuration written in advance… The forehead.). So while I was really hoping for an out-of-the-box, no-attitude, customized package (WebPack now supports īšâŠ™), Parcel will do just that

Without further ado, how to use parcel

install

The official documentation tells us to install globally, so let’s install globally

npm install -g parcel-bundler
Copy the code

At this point we can use a parcel to pack

As you can see from above, the command to pack is parcel index.html, export/import is used, and updates are available in real time.

react

We often need to use something like VUE or React in our work. Our company uses React, so I use React to make a demonstration, which is as fast as vue

I didn’t speed up any of these videos, so we can see that Parcel is pretty fast and doesn’t need to configure Babel or postCSS because Parcel already presets some for us, which we can change if we want to

Custom. Babelrc

So let’s define it ourselves. Babelrc, let’s try it out with Ant Design.

If you don’t understand antD, look at the documentation for antD, we can customize the contents of.babelrc, so instead of importing the entire ANTD at a time, we don’t have to import the CSS file of ANTD separately. We only introduced the Button component of ANTD.

scss and image

When we write a front-end project, it’s inevitable to use… CSS is sure to be used, and precompiled languages like less and Sass are sure to be used as well, but precompiling requires one more conversion and webpack requires the corresponding Loader to handle, while parcel can be written directly

I pre-saved an image below.

There’s a parcel feature that just happened to show you a highlighted error message, similar to vue’s, throughout the screen.

We drink the SCSS and images directly and process them directly

The rest of the

I’ve shown you just a few of the features of Parcel. Parcel can also package multiple files and handle typescript, Vue, etc

You can also do online packaging, where the packaged code is compressed.

I thought

In fact, while I feel that Parcel is awesome and can be used with almost no configuration, I don’t think there’s a lot of use for it in today’s complex engineering front-end projects, bizarre requirements, and highly customizable usage scenarios

but

I do, even if I see a new library or plugin that I’m interested in, I’ll definitely pack it with a parcel because it doesn’t have to worry about it (although webPack can do that now)…

What do you think of parcel?

I’m a front end warrior, a front end elementary school.