This article mainly introduces the advantages and disadvantages of the current front-end engineering framework and a detailed comparison of the current process.

background

With the launch of Node.js in 2009, it was a historic moment for the front-end. Along with Node.js comes the CommonJS specification and NPM package management mechanism. Subsequently, a series of front-end development and construction tools based on Node.js, such as Grunt, Gulp and Webpack, were published. At some point in 2013, the first versions of the three front-end frameworks, React. Js /Angular/ vue.js, were released. We can go from page-by-page development to component-based development. After the completion of development, webpack and other tools are used for package construction, and the command line tool based on Node.js is used to publish the construction results online. Front-end development has become standardized, standardized, and engineered.

Task builder

An overview of the

Task-runner is a tool that automates the organization and execution of tasks. It is used to execute some commands or process files using plug-ins, such as compression, conversion, formatting, etc. The traditional tools include gulp, Grunt, and NPM script.

Framework of contrast

The framework Github Npm(weekly down)
gulp Star: 32.4K, Fock: 4.4K, User: 1.6m 1434891
grunt Star: 12.1K, Fock: 1.5K, User: 889K 710405

It can be seen from the above table that gulp is more widely used than Grunt. Gulp has made improvements on the basis of retaining the essence of Grunt and can even use the plugin of grunt. Gulp is maintained continuously by a dedicated person, while Grunt has not been updated for more than half a year. Here we make a detailed distinction between the two

Grunt

A set of front-end automation build tools, a Command line tool based on nodeJs, it is a task runner, with its rich powerful plug-ins

Features:

  • Merge files (JS/CSS)
  • Compressed file (JS/CSS)
  • Syntax checking (JS)
  • Less/SASS precompilation processing

This frame belongs to the older frame, the current state is photographed on the beach

Gulp

Gulp is a front-end project builder similar in functionality to Grunt, although both are nodeJs-based task automators. And can automatically complete the javascript/coffee/sass/less/HTML/image/CSS file consolidation, compression, inspection, monitoring file changes, the browser automatically refresh, testing tasks such as gulp more efficient (asynchronous), easier to use, plug-in is high quality. It is much more powerful than Grunt. Specific as follows:

  1. Code over configuration, Node best practices, a streamlined set of apis, and Gulp makes life easier than ever.
  2. Based on Node’s powerful stream capabilities, gulp speeds up builds by not writing files to disk immediately.
  3. Strict guidelines are followed to ensure that our plug-ins are simple in structure and run with controllable results.

The secret to practice, just look at the API

Literally wrote a monitoring file, only for reference, do not ridicule

const watch = require('gulp-watch')
const start = require('./scripts/changeMd')

watch(['packages/*/*.md'].function() {
  start()
});

function defaultTask() {
  start()
}

exports.default = defaultTask
Copy the code

npm script

Above is the familiar working mode of GULp and Grunt. Although they made a friendly build for our project, there were problems: the need for plug-ins; It has its own build language, which is cumbersome to use.

Through the above content we can add NPM Script package tool

Module packaging tool

What is a module packer? Package several modules into one or several files and then reference them. Of course, there is also a concept ———— is es Module, which is actually a concept of mode in Scritps. You can refer to local JS. In es5, there is also a function scope in addition to the global scope, so we can split the code into different function scopes. Now the mainstream of these eldest brothers have what, to everyone one by one introduction (not commonly used calculate).

The framework Github Npm(weekly down)
vite Star: 3.5K, Fock: 2.5K, User: 85.3K 409938
webpack Star: 60K, Fock: 8.1K, User: 8M 19690682
rollup Star: 21K, Fock: 1.1K, User: 1.3m 5996992
parcel Star: 39.7K, Fock: 2K, User: 165K 79546
browserify Star: 13.9K, Fock: 1.2K, User: 376K 1844003

From the above table we can see that WebPack is the most commonly used packer. Vite is the most popular framework these days. Now I’m going to tell you what the difference is between these big brothers.

Vite

Vite (French for “fast”, pronounced /vit/, also known as “veet”) is a new front-end build tool that dramatically improves the front-end development experience. It mainly consists of two parts: a development server, which provides rich built-in features based on native ES modules, such as surprisingly fast module hot update (HMR); A set of build instructions that use Rollup to package your code and that are pre-configured to output highly optimized static resources for production.

The above is a bit too official, but it’s actually using the Rollup stuff to further encapsulate it with the ES module. The Node service uses KOA. Look at the latest update has its own server.

A get request is made when we use the script tag type=module

<scripts type="module" src="./app.js"></scripts>
Copy the code

Take an example of how a Vue file is called in main.js.

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Copy the code

The internal import package will make the get request directly

GET http://localhost:3000/@modules/vue.js
GET http://localhost:3000/src/App.vue
Copy the code

With these operations, the big brother can hijack the browser request and simply decompose and access the files in the project. Vite does not package and compile files in this process and is faster than WebPack.

Of course, it also has some disadvantages:

  • The development browser for the project should support esModule
  • Commonjs syntax is not recognized
  • Ecological less

All in all, Vite does a lot of work in today’s build environment and is used in its own build library without any problems. I can only say ———— really sweet

Secrets of uniting the

Webpack

It’s official: Webpack is a module packer. Its primary goal is to package JavaScript files together for use in the browser, but it can also transform, bundle, or package any resource or asset.

Big Brother was developed and released 10 years ago, to be honest, sincere kudos to the big brothers who maintain these, keep updating the new technology, really not easy. We can call him the tough guy.

Webpack is constantly following current iterations of technology and has a large market.

Say how it works:

  • Identify entry and find all entry files
  • According to NPM, dependencies are identified recursively and a dependency tree is constructed
  • Convert code into an AST abstract syntax tree
  • Work with the code in the AST phase
  • Turn the AST abstract syntax tree into code that the browser can recognize, and then print it out

Webpack is actually great for large projects. It mainly has the following technical characteristics: code segmentation; Support for loaders; Intelligent analysis; Plug-in system. The technical ability is absolutely great. For example, it is recommended to use Webpack for complex scenarios involving CSS, HTML and complex code splitting and merging

Webpack also has its downsides. The WebPack service is so eager to grab and build your entire application that launching the service can be slow.

Secrets of uniting the

Rollup

Rollup is a JavaScript module wrapper that compiles small pieces of code into large, complex pieces of code, such as libraries or applications. Rollup uses a new standardized format for code modules that are included in the ES6 version of JavaScript rather than the previous special solution. ES6 modules allow you to use the most useful stand-alone functions in your favorite library freely and seamlessly, without having to carry around other unused code in your projects.

Rollup is a modular packaging tool that merges files in a project. You don’t need to worry about its order or named parameters when packaging. Supports multiple formats of output:

  • amd – AMD
  • cjs -CommonJS
  • es – ES6 modules
  • umd – UMD
  • system – SystemJS loader

Some formats of output need to be maintained with rollup’s plug-in.

The principle of this warrior is basically as follows, the whole is similar to Webpack, but the details are very different

  • Get the contents of the entry file, wrap it into a Module, and generate an abstract syntax tree
  • Dependency parsing of the entry file abstract syntax tree
  • Generate the code we need from the parser
  • Finally write to the target file

Rollup tends to be js library, do ES conversion, module parsing, you can use rollup.

Secrets of uniting the

Parcel

Parcel is a Web application packaging tool, and good developer experience sets Parcel apart from its peers. Parcel leverages multi-core processors to provide extremely fast speeds and requires no configuration.

The official said that the packaging speed is very fast, the actual measurement is indeed a lot faster, can reduce twice the time. For our development, it can greatly reduce the compile time. The functionality is pretty much the same: modularization, compilation, compression, hot replacement.

The principle is pretty much the same

  • Initial Configuration
  • Recursive compilation
  • Build Bundle tree
  • Generate the code we need

The framework above is basically the same. However, it is friendly for us to develop and compile, and magical for beginners.

Secrets of uniting the

Browserify

Browserify lets you organize browser-side Javascript code in a way similar to Node’s require(), precompiling the front-end Javascript directly using some of the libraries installed by Node NPM.

It has not been updated for more than a year, and uses the same usage as the original CommonJS. All operations are command-line, which is not very friendly to the front end. I don’t recommend it

Fis3, Roadhog, create-React-app, etc.

Package management tool

NPM has been around since The release of Node, and everyone has been using the NPM package management tool. NPM also launched a lot of tools in the following, let me introduce you again.

The framework Github Npm(weekly down)
npm Star: 17.3K, Fock: 3.2K, User: — 3769724
yarn Star: 40.3K, Fock: 2.8K, User: 89.1K 2603440
cnpm Star: 3.5K, Fock: 763, User: – 6745
pnpm Star: 14.2K, Fock: 385, User: 1.9K 411146
tyarn Star: 108, Fock: 13, User: – 981

Npm

This is a common one, but I won’t go into it here. NPM honesty is one of the main reasons node.js is so successful. NPM manages packages by storing individual packages in its own code repository, storing information about individual packages in its own database, and then by NPM commands.

It has to work like this:

  1. Remotely obtain package information through the config information.
  2. Build a dependency tree and recurse inside to all flattening
  3. Download the package to node_modules and generate the lock file.

Yarn

It is a package management tool developed by Google and Facebook and other international large companies. It mainly solves many defects of NPM: slow download speed; Slow installation speed; There is no unified version control.

The general principle is the same. Let’s talk about the difference between NPM and NPM:

  • Parallel downloading improves the speed of package downloading
  • Yarn. lock file was introduced to store dependencies between packages
  • The yarn.lock file eliminates the need to calculate version dependencies between packages each time, resulting in faster installation

Cnpm

This is a tool launched by Taobao. Mainly to solve the problem of domestic use NPM slowly have dropped, so out of their own source of https://registry.npm.taobao.org. To tell the truth, it didn’t solve the real problem, just put the NPM package Cope on the domestic server image. The 10-minute synchronization is already friendly to domestic developers.

Tyarn

I won’t say much about this, but it is the domestic mirror of YARN. Taobao development.

Pnpm

We’ll end with a state-of-the-art package management tool. Performant NPM, officially given several features

  • PNPM is 2 times faster than the alternative
  • The files in Node_modules are linked from a single content-addressable store
  • PNPM has built-in support for single warehouse and multiple packages
  • PNPM creates a non-tiled node_modules, so code cannot access arbitrary packages

I have tested it myself, and it is almost 6. At present, I am gradually replacing YARN.

Here’s how it works:

  1. Query dependencies through package.json
  2. Check whether there is a cache. If not, download it to the cache. If yes, go to the next step
  3. Create node_modules directory in the directory.pnpmInitialize the structure
  4. Hard links are used to place files from the corresponding package in the cache into the corresponding package code directory
  5. Use symbolic links to place the direct dependencies of each package in its own directory
  6. Use symbolic links in the node_modules directory of the project to place direct dependencies, which will be above.pnpmGo to node_modules and use it directly.

The whole link is open. The big brother is to cache the downloaded package so that it will be easier to use next time. The idea is avant-garde. You can try it together. At present, bytes have been widely used in China.

Conclusion: This is the conclusion for now. The advantages and disadvantages of each framework are analyzed from three aspects: task building tool, module packaging and package management. Single test, mock and other tools will also be input in the later stage. Front-end technology is getting updated faster and faster, so I can keep up with it. It’s better than a few years ago when I was a rookie. You are welcome to make suggestions and listen to them with an open mind.