(above) mainly around git, NPM, command line tools, encryption and decryption tools, data verification, document generation tools and so on. Off-the-shelf wheels are used to improve our development efficiency and solve some problems encountered in different scenarios

Through reading the awesome nodejs library, I have extracted some of the more extensive categories of application scenarios and shared the tools with you through the categories of application scenarios involved

1. Graphic processing πŸ–ΌοΈ

1.1 Application Scenario 1: How to crop, convert formats, rotate, and add filters to images

You can use the following tools:

  • Sharp: The fastest module for resizing JPEG, PNG, WebP and TIFF images.
  • Jimp: Image processing in pure JavaScript.
  • Gm: GraphicsMagick and ImageMagick encapsulation
  • Lwip: Lightweight image processor that does not require ImageMagick

As shown in the following clipping diagram

What the hell is ImageMagick?

ImageMagick is a powerful, stable and open source toolset and development kit that can read, write and process image files in more than 89 basic formats, including popular TIFF, JPEG, GIF, PNG, PDF and PhotoCD. With ImageMagick, you can dynamically generate images based on the needs of your Web application, and you can resize, rotate, sharpen, subtract, or add special effects to an image (or a group of images)

1.2 Application Scenario 2: How do I generate QR codes and bar codes

You can use the following tools:

  • Node-qrcode: qrcode and barcode generator
  • Qr-image: indicates a QR code generator

Ah Le: If I want to parse the QR code, is there any wheel I can use?

You can use:

  • JsQR: a pure javascript two-dimensional code reading library. The library receives the raw image and will locate, extract and parse any QR codes found in it.

1.3 Application Scenario 3: How to Compare images? Are the pixels consistent?

You can use the following tools:

  • Pixelmatch: The smallest, simplest, and fastest JavaScript pixel-level image comparison library.
  • Redscreen.js: image pixel comparison tool

1.4 Application Scenario 4: How to Check the Image Type?

You can use the following tools:

  • Image-type: detects the image type of Buffer/Uint8Array.

2. Build tool ⛏️

2.1 Application Scenario 1: What are the Build tools?

You can use the following tools:

  • Webpack: Package the browser’s modules and assets.
  • Parcel: a fast, zero-configuration Web application building tool.
  • Esbuild: extremely fast JavaScript packaging and compression tool that does not use AST
  • Rollup: A new generation of ES2015 packaged build tools.
  • Grunt: JavaScript task executor.
  • Gulp: Fast build system by streaming, supporting code rather than configuration.
  • Snowpack: Is a relatively lightweight Bundless solution

2.2 Application Scenario 2: What are the ESM building tools?

You can use the following tools:

  • Vite: A new generation of front-end build tools.
  • Snowpack: Front-end build tool supported by ESM. Real-time, lightweight, unbundled development

πŸ‘© : What is Bundleless?

Bundleless mode takes advantage of the browser’s ability to load itself. By skipping the packaging process, it allows us to get extremely fast startup time directly from project startup, and only recompile individual files for local updates

3. The cache πŸ“¦

3.1 Application Scenario 1: What are the ALGORITHMS based on the LRU cache tool?

πŸ‘© : What is LRU cache?

LRU, also known as Least Recently Used, is a cache elimination algorithm. The core content is that if the data has been accessed recently, it has a higher chance of being accessed in the future. If the data has not been used for a long time, it will be deleted first. It is often used to optimize the performance of cache query, including keep-Alive in vue, the framework we use, which is also developed based on this algorithm

  • Lru-cache: The least recently used cache (LRU) implementation.
  • Hashlru: A lighter and faster LRU algorithm.
  • Ylru: Adds an expiration time based on hashLru, allowing null values.

3.2 Application Scenario 2: What Are the Node-based cache tools?

  • Node-cache: node. js memory cache module.
  • Node-cache-manager: node. js Cache module.

4. Minimize πŸ’§

Application performance optimization, we will think of JS, HTML, CSS file compression, so that its file minimization, then what wheels can be directly used?

4.1 Application Scenario 1: What are the JS file compression tools?

  • Uglip-js: JavaScript compression tool.

πŸ‘©πŸŽ“ : I remember there is a webpack plugin called uglifyjs-webpack-plugin, what is the relationship with this?

Uglifyjs-webpack-plugin is a plug-in developed based on UglifyJS, but UglifyJS does not support direct processing of ES6 files, only ES5 files. For ES6 syntax, our previous code minimization process is shown below

Uglip-es support for processing ES6 files was later developed, but the project has been discontinued due to too many bugs. However, terser-Webpack-plugin was later developed after the Uglip-es fork and maintenance iteration

πŸ‘©πŸŽ“ Ah: Is there any compression tool that can support processing ES6 code

As browsers support more ES6 features, our code minimization process follows

You can use the following tools:

  • babel-minify: ES6+ compression library based on Babel toolchain, formerly calledbabili
  • Terser: javascript parser and obfuscation compression toolkit for ES6

Here is a comparison πŸ‘‡

4.2 Application Scenario 2: What are the FILE compression tools of the CSS?

You can use the following tools:

  • Cssnano: a modular compression tool built on top of the PostCSS ecosystem.
  • Clean-css: CSS compression tool.

4.3 Application Scenario 3: What are the Image Compression tools?

  • Imagemin: Image compression tool.

4.4 Application Scenario 4: What are the mainstream compression plug-ins in the WebPack ecosystem?

  • Uglifyjs-webpack-plugin: Compress JS files based on UglifyJS, es6 is not supported
  • Terser-webpack-plugin: Supports compression of ES6 (Webpack4)
  • Html-webpack-plugin: Simplifies HTML file creation
  • Optimize – CSS-assets-webpack-plugin: Optimize the webpack plug-in that reduces CSS resources. Change to csS-minimizer-webpack-plugin in Webpackage 5

5. Network πŸ„

5.1 Application Scenario 1: How to Obtain a User IP Address?

πŸ‘©πŸŽ“ Ah Le: What information do we usually use to obtain the IP information of users in Node service

General can be obtained from the following information, of course, there are quite a lot of good “wheel” to use oh ~

You can use the following tools:

  • Node-ip: NodeJS IP address tool.
  • Public-ip: very fast to obtain your public IP address.
  • Request-ip: obtains the requested IP address from the server.

5.2 Application Scenario 2: How do I Know which New Port to Use?

πŸ‘§ Ahsen: When we run the project local development environment through scaffolding such as VUe-CLI, we will start a local service and assign a port. How does he do this?

In the vue-CLI source code, you can see that it uses Node-portFinder, which not only automatically detects whether the current port is occupied but also returns a new port if it is occupied

  • Node-portfinder: Simple tool for finding open port or domain sockets on the current machine.
  • Get-port: obtains an available port.

6. HTTP 🌍

6.1 Application Scenario 1: What request library tools are available?

You can use the following tools:

  • Axios: Promise based HTTP client (also works in a browser).
  • Request: a simple HTTP request client.
  • Superagent: HTTP request library.
  • Node-fetch: window.fetch implementation of Node.js.

6.2 Application Scenario 2: How do I Start a Service using Node?

I want to start a service, or do analog data, or do static resource server, etc., what wheels can be used?

  • Http-server: indicates the COMMAND line HTTP server with zero configuration.
  • Anywhere: Turn your current directory into the root of a static file server anytime, anywhere.
  • Json-server: A fully forged REST API with zero encoding in less than 30 seconds.

πŸ‘§ Ah-Kuan: If I want to start a daemon process?

You can start a service using, for example, PM2, which guarantees that the process will live forever

You can use the following tools:

  • Pm2: advanced process management tool.
  • Nodemon: Monitors changes in the application and automatically restarts the server.
  • Forever: Simple CLI tool for verifying that supplied code continues to run.
  • supervisor: Restarts the script when it crashes, or when*.jsRestart the script when the file changes.

6.3 Application Scenario 3: How do I Start a Proxy Service using Node?

We often see webpack-dev-server configuration in Webpack, and then configure the local development interface mapping to solve the local development cross-domain problem, essentially http-proxy-middleware based middleware, By proxying requests from the back-end API to the local server. Including mock services is also a proxy service, and the proxy server is just a intermediary, which is summarized to address the following three points

  • Local development
  • The proxy to access
  • Prevent cross domain

You can use the following tools:

  • Http-proxy: advanced process management tool.
  • Http-proxy-middleware: ⚑ single-line Node.js HTTP proxy middleware for Connect, Express, and Browser-sync.
  • Fast-proxy: Node.js framework that allows you to forward HTTP requests to another HTTP server. Supported protocols: HTTP, HTTPS, and HTTP2.

7. Template engine πŸš€

Is a template engine by combining the page template, will display the data generated HTML pages of tools, in essence is the demand of the back-end rendering (SSR), plus the Node rendering the page itself is pure static, when we need to page diversification, more flexible, we will need to use the template engine to enforce the page, the advantage of better highlight the service side rendering

You can use the following tools:

  • Pug is a robust, flexible, feature-rich template engine developed specifically for the Node.js platform
  • Mustache: Lightweight JavaScript template engine {{mustache}}
  • Art-template: High-performance JavaScript template engine.
  • Handlebars: A superset of Mustache templates, adding powerful features such as helpers and more advanced blocks.
  • DoT: The fastest and simplest JavaScript template engine.

For performance, we compare the rendering speed of different tools, which can be found in the following figure πŸ‘‡

8. Functional programming πŸ‰

Functional programming makes a lot of use of functions, which allows us to repeat less code, while not changing the state of the outside world, because dependency can greatly increase system complexity

You can use the following tools:

  • Immer: Functional responsive programming.

  • Immutable: a collection of data that is immutable.

  • Lodash: A library of utilities that provide consistency, customization, performance, and other features that are better and faster than Underscore.

  • RXJS: A functional and responsive library for transforming, combining, and querying various types of data.

  • Lazy: A tool library similar to Lodash /underline, but with lazy calculations that translate to superior performance in many cases.

9. File system πŸ₯€

As we know, the Node system has fs module, which can create, write and delete corresponding directories of relevant files, etc. Are there any off-the-shelf wheels you can use other than the existing API

9.1 Application Scenario 1: Fs Module Related Tools? (File reading, directory creation, deletion)

You can use the following tools:

  • Fs-extra: Provides extra methods for the FS module.

  • Graceful-fs: Graceful-FS can replace the FS module with various improvements.

  • Filesize: generates human-readable filesize strings.

  • Make-dir: creates a folder recursively, similar to mkdir -p.

  • Find-up: searches for files or directories in the parent directory.

  • NCP: Use Node.js for asynchronous recursive file replication.

  • Rimraf: Deletes files recursively, similar to rm -rf.

9.2 Application Scenario 2: How do I Monitor file changes?

Replace the fs. Watch

You can use the following tools:

  • Chokidar: The smallest and most efficient cross-platform Watch library.

Previous popular articles πŸ“– :

  • Developing visual Data Screens from 0 to 1 (PART 1)
  • Developing visual data Screens from 0 to 1 (part 2)
  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Hello, I am 🌲 tree sauce, please drink a cup 🍡 remember three lian oh ~

1. Remember to click a thumbs-up after reading oh, there is πŸ‘ motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨