Parcel - a very fast bandler that does not require configuration.
For what
Parcel is a small and fast bandler, positioned as a solution for small projects. Since the first release (7 days ago), I have already collected 8725 stars on the githaba. According to official documentation has the following advantages:
Quick build
Parcel uses the worker process for multi-threaded builds, and also has its own file cache for quick reassembly with subsequent changes.
Collects all your assets.
Out of the box, there is support for ES6, TypeScript, CoffeeScript, HTML, SCSS, Stylus, raw files. No plugins required.
Automatic conversions
All code automatically passes through Babel, PostCSS, PostHTML - picked up, if necessary, from node_modules.
️ Separate code without configuration
Using dynamic import (), Parcel splits the bundle to enable quick initial loading of the entry point into the application.
Hot reboot
A typical hot-reload without configuration - save the changes and they are automatically applied in the browser.
Friendly error output
When an error is highlighted, a piece of code in which it occurred.
Also on the main page is a benchmark:
| Bundler | Time |
|---|---|
| browserify | 22.98s |
| webpack | 20.71s |
| parcel | 9.98s |
| parcel - with cache | 2.64s |
Mechanics work
Parcel's approach is similar to Webpack’s (it’s hard to come up with something new).
We have an entity - Asset. Asset is any file. The mechanics of operation are as follows: an interface is implemented that provides the logic for turning a file into an AST, resolving all dependencies, applying the necessary transformations, and generating the resulting code. If you are not satisfied with the work of some asset from the box or you want to add your own - there is nothing difficult .
Next comes Packager. The packer sticks the assets to the final bundle. This happens after processing and successful construction of the tree. Packers are registered based on file type. Want to write your packer? You here .
We can also write our own plugins that Parcel will pick up from package.json. To do this, the plugin package name must have the prefix parcel-plugin- . But this is a very special case, which most likely already leads to the fact that you need to switch to a webpack or other convenient tool.
On practice
Put the package, initialize the application through any package manager:
$ yarn global add parcel-bundler $ mkdir parcel-test && cd parcel-test $ yarn init -y For example, write hello world on Preact. Create the following structure:
parcel-test ├── package.json ├── src │ ├── app.jsx │ ├── components │ │ └── clock │ │ └── Clock.jsx │ └── index.html └── yarn.lock 3 directories, 5 files And also install the necessary packages:
$ yarn add preact babel-plugin-transform-react-jsx postcss-modules autoprefixer To configure Babel, create a .babelrc with the following content:
{ "plugins": [ ["transform-react-jsx", { "pragma":"h" }] ] } For PostCSS:
{ "modules": true, "plugins": { "autoprefixer": {} } } For autoprefixer:
> 1% last 2 versions index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parcel demo</title> </head> <body> <script src="./App.jsx"></script> </body> </html> App.jsx
import { h, render } from 'preact'; import { Clock } from './components/clock/Clock'; render(( <div> <h1>It works!</h1> <Clock /> </div> ), document.body); Clock.jsx
import { h, Component } from 'preact'; import styles from './Clock.css'; export class Clock extends Component { constructor() { super(); this.state = { time: Date.now() }; } componentDidMount() { this.timer = setInterval(() => this.setState({ time: Date.now() }), 1000); } componentWillUnmount() { cleanInterval(this.timer); } render(props, state) { let time = new Date(state.time).toLocaleTimeString(); return <span className={styles.clock}>{ time }</span> } } Clock.css
.clock { color: green; } 
And it's all. As you can see, we haven’t spent a minute writing configuration files, with the exception of .babelrc and .postcssrc
Summing up some
Before us is a kind of "Webpack on minimum salary", which provides the ability to quickly deploy a working environment for a small project. The technology stack is essentially limited to a standard set of assets, but at any time it can be expanded with its own. Given the full support of Babel, we can easily use almost any other framework or library (except with Angular there will be difficulties, because writing with it on ES6 and without native tools is an amateur task), and supporting PostCSS out of the box is another nice addition .
Of the inconveniences, I can only note one thing - when working with TypeScript, the bandler does not take into account user paths and the base directory ( baseUrl and paths sections) specified in the tsconfig file, and, accordingly, cannot properly resolve the paths of imported modules. On github there is a discussion of solving this problem.
')
Source: https://habr.com/ru/post/344486/
All Articles