What Is The Parcel Web Application Bundler And How Does It Work?
What is the Parcel and what is it for?
Parcel – a small and fast web application bundler, is positioned as a solution for small projects. Since the first release (7 days ago) has already collected 8725 stars on the GitHub. According to the official documentation has the following advantages:
Quick assembly
Parcel uses a workflow for multi-threaded assembly, and it also has its own file cache for fast rebuilding with this change.
Gathers all your assemblies
Out of the box, there is support for:
- ES6,
- TypeScript,
- CoffeeScript,
- HTML,
- SCSS,
- Stylus,
- raw files. Plugins are not required.
Automatic conversions
All the code automatically passes through:
- Babel,
- PostCSS,
- Post HTML – are picked up if necessary from node_modules.
️ Separation of code without superfluous configuration
Using dynamic import (), Parque separates the bundle from the ability to quickly boot 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
If an error occurs, the code in which it occurred is highlighted.
Also on the main page of the sample benchmark:
How does it work?
The approach of Parcel is similar to that of Webpack (it’s hard to come up with something new).
We have the essence – Asset. The asset is any file. The mechanics of the work are as follows: an interface is implemented that provides the logic for converting the file into AST, resolving all dependencies, applying the necessary transformations, and generating the resulting code. If you are not satisfied with the work of some asset out of the box or you want to add your own – there is nothing complicated.
- Next comes Packager. The packer glues the assets into the final bundle. This happens after processing and successfully building the tree. Packers are registered based on the file type. Want to write your packer? Then you can do it from here.
Also, we can write our own plug-ins, which Parcel will pick up from package.json. To do this, the plug-in package name must have the prefix parcel-plugin-. But this is a very special case, which most likely leads to the fact that you need to switch to a web pack or other convenient tool.
On practice
We 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, I write the world’s greetings 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
In order to configure Babel, create .babelrc with the following content:
{
"plugins": [
["transform-react-jsx", { "pragma":"h" }]
]
}
For PostCSS:
{
"modules": true,
"plugins": {
"autoprefixer": {}
}
}
For autoprefixer:
> 1% last 2 versions
Component Listings
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parcel demo</title> </head> <body> <script src="./App.jsx"></script> </body> </html>
import { h, render } from 'preact';
import { Clock } from './components/clock/Clock';
render((
<div>
<h1>It works!</h1>
<Clock />
</div>
), document.body);
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 {
color: green;
}
Result
And it’s all. As you can see, we did not spend a minute writing configuration files, except for .babelrc and .postcssrc
Conclusion
The stack of technologies 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 that with Angular there will be difficulties because writing with it on ES6 and without native tools is an amateur task, and PostCSS support from the box is another nice addition.
Of the inconveniences, we can note only one thing: while working with TypeScript, the bundler does not take into account the user paths and the base directory (baseUrl and paths sections) specified in the tsconfig file, and, accordingly, cannot normally resolve the paths of the imported modules. The discussion on the solution of this problem is on the GitHub.
