Hello, I am Cangcang Liangliang, a front-end developer. At present, I am publishing some interesting and knowledge about front-end learning on Nuggets, Zhihu and my personal blog. Welcome to follow me.

Ten years ago, there was no separation between the front end and the back end. After the front end wrote the interface, all the page files would be handed to the back end, which would then be deployed on services such as Tomcat. The front end of that era was largely despised, and was even nicknamed the -Cut diagram boy.

But then the big thing happened. After Chrome came out, the Google team opened source V8 engine, and Ryan Dahl developed a JavaScript environment based on V8 engine called Node.js that rocked the front-end industry. Due to its emergence, the front-end project has moved towards engineering and the separation of the front and back ends. At the same time, due to node.js, JavaScript can not only be used to develop the Web end, but also mobile phone end, desktop end, server end and so on.

There are three well-known JavaScript packaging frameworks: Webpack, Rollup, and Parcel with a 0 configuration.

They all have their advantages, but exploring the differences isn’t the point of this article, as I’ve looked through a lot of data and found that Webpack is a good package for engineering projects, Rollup is a good package for libraries, and Parcel’s advantage is its 0 configuration package.

For example, in one of my previous papers, Tampermonkey script development environment. At that time, I didn’t have access to a Parcel, but it was possible to use Webpack to package scripts, but Webpack required a lot of complicated configuration, and scripting projects like this, Using a Parcel out of the box is much easier and faster.

1. Use the Parcel

If you have learned Webpack, you should know that Webpack has a configuration file. By default, it can only package.js and.json files without any configuration, and other files cannot be packaged directly. You need to configure loader one by one.

Parcel, on the other hand, packages almost all of the front-end file formats (CSS, sass, less, TypeScript, img, etc.) by default. It doesn’t require you to write configuration files manually. All you need to do is download the build environment like sass using NPM install -d sass, while less doesn’t even need to be installed, as Parcel will automatically install the build environment when it detects less files! That’s amazing!

1.1 Simple Packaging

If we were simply packaging a JS script file, we could have installed parcel-bundler globally.

npm install -g parcel-bundler

#Or yarn
yarn global add parcel-bundler
Copy the code

Then generate a package.json file in the project you are building (if you don’t need to use the NPM package, you can package it without generating it).

npm init -y
Copy the code

1.1.1 Single-entry packing

In general, modern Web frameworks generate single-page applications, so we just need an index. HTML file as the entry file, and an index.js file in it.

Such as:

Index.html:

<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
Copy the code

Index. Js:

console.log('hello world')
Copy the code

Parcel comes with a built-in development server that automatically rebuilds your app when you change files. To open the server, type the following command from the console:

parcel index.html
Copy the code

The service starts on port 1234 by default, so you can access your Web application by visiting http://localhost:1234/, and you can manually specify the port number you want to run using -p 8080.

parcel index.html -p 8080
Copy the code

In some cases where you want to package a JS script, such as developing an oilmonkey script, you don’t need to start a server at all, just listen for changes to the JS file. Add watch to the argument, and when the file changes, it will still automatically rebuild and support hot replacement, but it won’t start the Web service.

parcel watch index.html
Copy the code

Each of these commands generates a dist folder, which is where the packaged files are placed in the development environment.

1.1.2 Multi-entry packing

Suppose you have multiple entry files, such as index.html and about.html, then you can package them in two ways:

Specify the name of the current file:

parcel index.html about.html
Copy the code

Use tokens and create a Glob:

parcel ./*.html
Copy the code

Packaged in this way, if you want to visit the index. The HTML must through http://localhost:1234/index.html to visit the form of direct access to http://localhost:1234.

1.1.3 Production Environment

The production environment does not constantly listen for changes to the files that need to be built, that is, only build once, and the command is very simple, directly use:

parcel build index.html
Copy the code

In this mode, all code is compressed.

Of course, you can also specify the output directory:

parcel build entry.js --out-dir build/output

#or
parcel build entry.js -d build/output
Copy the code

2. React

Packing a React project via Parcel is a very simple matter:

npm install --save react react-dom
npm install --save-dev parcel-bundler

#Or use YARN
yarn add react react-dom
yarn add --dev parcel-bundler
Copy the code

After installing the dependencies in your project, you can use React to build your project. Call it a day ~

What? You say you don’t know how to start writing a React app? Don’t worry, let me tell you step by step:

It’s the same procedure: you need an index. HTML file as the entry file, and then you need an index.js file, and then you need an app. JSX file in the index.js file.

Index.html:

<body>
    <! React root -->
    <div id="root"></div>
    
    <script src="./index.js"></script>
</body>
Copy the code

Index. Js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";


ReactDOM.render(<App/>.document.getElementById("root"));
Copy the code

App. JSX:

import React from "react";

const App = () = > {
  return (<div>Hello React!</div>);
};

export default App;
Copy the code

To start the service via a Parcel:

parcel index.html
Copy the code

Visit http://localhost:1234 to see Hello React! The React project will then be written as normal.

3. Vue

Vue is even simpler, just install a Vue package like this:

npm install --save vue
npm install --save-dev parcel-bundler

#Or use YARN
yarn add vue
yarn add --dev parcel-bundler
Copy the code

How to start a Vue project is similar to the React project above, but the difference is how to write index.js:

import Vue from 'vue';
import App from './App';

new Vue({
  render: (h) = > h(App)
}).$mount("#root")
Copy the code

Now you can write your vue project in your app. vue file!

4. Typescript

Again, the following packages need to be introduced:

npm install --save-dev typescript
npm install --save-dev parcel-bundler

#Or use YARN
yarn add --dev typescript
yarn add --dev parcel-bundler
Copy the code

Call it a day! You can now use TypeScript syntax in your projects and, of course, Parcel serves as the 0 configuration packaging framework, or compile TypeScript directly.

parcel myTypescriptFile.ts
Copy the code

Isn’t it very simple?

In my experiments, As soon as Parcel detects the relevant files, it automatically installs dependencies for you, such as.jsx,.vueFile, so you don’t even need to install dependencies, just use it to package.

NPM install –save react — dom and NPM install –save vue do not need to type. The Parcel will type automatically for you.

Vue and Vue scaffolders are not recommended for large or medium-scale projects because they have been configured and optimized for various projects.

5. The last

Parcel doesn’t have much to say because it advertis for a 0 configuration, so you don’t need to read its official documentation too much, just look it up when you need it, unlike packaging tools like Webpack and Rollup, which must be configured before using them because of their ease of use, In a world where Webpack is so strong, Parcel has a place.