1. An overview of the
Parcel was released in 2017 because Webpack was too cumbersome to use at the time and the documentation on the website wasn’t very clear. Parcel’s core feature is a truly zero-configuration, near-dumb-ass experience that allows you to build front-end applications with just a few simple commands, without intruding on your project.
And dependencies are automatically installed throughout the process, allowing the development process to focus more on coding. In addition, Parcel builds are very fast, uses multiple processes internally, and is much faster than Webpack packaging.
But in fact, most of the project packaging will still use Webpack, because the Webpack ecosystem is better, the extension will be richer, and problems can be easily solved.
For a tool like Parcel, getting to know it is all about staying sensitive to new technologies and tools. To better understand the trend and direction of technology, that’s all.
2. Use
Initialize the package.json file using YARN init. You can install the Parcel -bundler module corresponding to the Parcel.
yarn add parcel-bundler --dev
Copy the code
Create a new SRC directory for the source code you wrote during development. Create the/SRC /index.html file as the entry file for parcel packaging.
Parcel, like WebPack, supports any type of file as the entry point, although Parcel officially recommends using HTML as the entry point because HTML is the entry point when the app is running in the browser.
In this entry file you can write as usual, or you can reference some resource files. The resources referenced here will eventually be packaged by the Parcel and exported to the output directory.
We’ll start with the main.js script file.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Parcel Tutorials</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Copy the code
Create a new/SRC /main.js file and create a new/SRC /foo.js file.
Foo.js exports an object by default as an ES Module.
export default {
bar: () = > {
console.log('hello parcel~')}}Copy the code
Import the foo module from main.js via import.
import foo from './foo';
foo.bar();
Copy the code
Parcel supports package of ES Module modules. The package command needs to pass in the path to the package entry.
yarn parcel src/index.html
Copy the code
Based on the parameters passed in, parcel finds the index.html file, the script tag in the index.html to the imported main.js file, and the import statement to the module foo to complete the package.
The parcel command not only packages the application but also opens a development server like dev-Server in WebPack. Open the developer tools in your browser (console F12) and use the auto-refresh feature.
export default {
bar: () = > {
// console.log('hello parcel~');
console.log('hello parcel11~'); }}Copy the code
It is also supported if you want to experience a parcel with module hot replacement, using the API provided by HMR in main.js.
Check whether the module.hot object exists. If it does, the HMR API can be used in the current environment. Use the module.hot.accept method to handle the logic of module hot replacement.
However, there is a slight difference between accept and the WEBPack API, which accepts two parameters to process the logic after the specified module is updated. Accept, on the other hand, accepts only one argument, a callback function that is automatically executed when a module is updated or a module that a module depends on is updated.
import foo from './foo';
foo.bar();
if (module.hot) {
module.hot.accept(() = > {
console.log('hmr'); })}Copy the code
In addition to hot replacement, Parcel also supports a very friendly feature that automatically installs dependencies.
Imagine developing an application and suddenly wanting to use a third-party module. You need to stop the running dev-server, install the module, and then restart dev-Server. With the auto-install dependency feature, it’s no longer such a hassle.
Imagine using jQuery. This module is not installed, but it relies on such functionality because of automatic installation. Just import it normally. After the import is complete, using the API provided by jQuery, after the file is saved, Parcel automatically picks up the imported module to install. Extra operations are largely avoided.
import $ from 'jquery';
import foo from './foo';
foo.bar();
$(document.body).append('<h1>Hello Parcel</h1>');
if (module.hot) {
module.hot.accept(() = > {
console.log('hmr'); })}Copy the code
In addition, Parcel also supports loading other types of resource modules, and loading any type of resource module in a Parcel is also zero-configuration compared to other module packers.
For example, add a/SRC /style.css style file. Then add some simple styles to the file.
body {
background: red;
}
Copy the code
Go back to main.js and import the style file with import. Once saved, the style will take effect immediately.
import $ from 'jquery';
import foo from './foo';
import './style.css';
foo.bar();
$(document.body).append('<h1>Hello Parcel</h1>');
if (module.hot) {
module.hot.accept(() = > {
console.log('hmr'); })}Copy the code
There are no additional plug-ins installed, and you can add images as you like.
import $ from 'jquery';
import foo from './foo';
import './style.css';
import logo from './icon.png';
foo.bar();
$(document.body).append('<h1>Hello Parcel</h1>');
$(document.body).append(`<img src=${logo}/ > `);
if (module.hot) {
module.hot.accept(() = > {
console.log('hmr'); })}Copy the code
In short, parcel wants to give developers the experience that you just do what you want and the tools take care of the extra stuff. Parcel also supports dynamic imports and automatically splits code internally if it uses dynamic imports.
// import $ from 'jquery';
import foo from './foo';
import './style.css';
import logo from './icon.png';
foo.bar();
import('jquery').then($ => {
$(document.body).append('<h1>Hello Parcel</h1>');
$(document.body).append(`<img src=${logo}/ > `);
})
if (module.hot) {
module.hot.accept(() = > {
console.log('hmr'); })}Copy the code
These are some of the most commonly used features of a Parcel. There is almost no difficulty in using the Parcel, just executing a Parcel command from start to finish. Everything is done in-house within Parcel.
3. Deploy production
Execute the build command provided by Parcel to follow the entry file path to run the package in production mode. Parcel builds much faster than Webpack for projects of the same size. Because multiple processes work simultaneously inside a Parcel to maximize the performance of a multi-core CPU, the Happypack plug-in can also be used in Webpack.
parcel build src/index.html
Copy the code