All You Need To Know About Parcel ? – freeCodeCamp
source link: https://medium.com/@wesharehoodies/all-you-need-to-know-about-parcel-dbe151b70082
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
You have 2 free member-only stories left this month.
Everything You Need to Know About Parcel: The Blazing Fast Web App Bundler 🚀
Evolution and innovation with zero configuration
Yet other bundler/build tool? Really? Yep — you betcha, evolution and innovation combined brings you Parcel!
What’s So Special About Parcel and Why Should I Care?
While webpack brings a lot of configurability with the cost of complexity — Parcel brings simplicity. Parcel brands itself as “zero configuration”.
Unraveling the above — Parcel has a development server built-in, out of the box. The development server will automatically rebuild your app as you change files and supports hot module replacement for fast development.
What Are the Benefits of Parcel?
- Fast bundle times — Parcel is faster than Webpack, Rollup and Browserify.
Something to consider: Webpack is still awesome and sometimes can be faster.
- Parcel has out of the box support for JS, CSS, HTML, file assets, and more — no plugins needed — More user-friendly.
- Zero configuration required. Out of the box code splitting, hot module reloading, CSS preprocessors, development server, caching, and many more!
- Friendlier error logs.
All Right — So When Should I Use Parcel, Webpack or Rollup?
It’s completely up to you but I personally would use each bundler in the following situations:
Parcel — Small to medium sized projects (<15k lines of code)
Webpack — Large to enterprise-sized projects.
Rollup — For NPM packages.
Let’s give Parcel a shot!
Installation is Fairly Straight-Forward
We installed the parcel-bundler npm package locally. Now we need to initialize a node project:
Next, create index.html
and index.js
file.
Let’s connect our index.html
and index.js
Finally, add parcel script to our package.json
:
That’s all there is to configuration — amazing time saver!
Next up — let’s start our server.
Work like a charm! Notice the build times.
15ms?! Wow — that’s blazing fast indeed!
How’s the HMR?
Also feels very fast.
All we need is the node-sass
package and we’re good to go!
Next up, add some styling and import the styles.scss
to index.js
:
Production Build
All we need is to add a build
script to our package.json
:
Running our build script:
See how easy Parcel makes our lives?
You can specify a specific build path like so:
parcel build index.js -d build/output
React
Setting up react is really simple, all we need to do is install our dependencies and setup our .babelrc
:
npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc
All right, let’s bring out the big guns! Try writing our initial react component yourself before scrolling…
As requested, here’s the Vue example.
Start by installing vue
and parcel-plugin-vue
— the latter for .vue
components support.
$ npm i --save vue parcel-plugin-vue
We need to add our root element, import the vue index file and initialize Vue.
Start by making a vue directory and let’s also createindex.js
and app.vue
$ mkdir vue && cd vue && touch index.js app.vue
Now let's hook our index.js
and index.html
:
Finally, let’s initialize vue and write our first vue component!
Voila! — we have Vue installed with .vue
support!
TypeScript
This one is extremely easy — just install TypeScript and we’re good to go!
npm i --save typescript
Make a file called index.ts
and insert it into the index.html
:
Good to go!
If you want to take your JavaScript abilities to the next level, I’d recommend reading the “You Don’t Know JS” book series.
Heres the Source Code!
Thanks for reading! ❤
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK