Note: common gadgets in project architecture

cheerio

stay node End , Like use jquery Do that dom

 var fileitem = fs.readFileSync(newformDirPath);
var $ = cheerio.load(fileitem.toString());
$.html() //  Of the entire page html
$('.app').html(); // app Inside html
                

nodemon

nodemon It's a tool , You can automatically detect changes in files in the directory and debug by restarting the application node.js Applications for , Every time when developing ,nodemon The document will be updated in time , Very convenient ,

package.json
nodemon ./src/js/index.js

 The configuration file :nodemon.json
{
    
  "restartable": "nv",
  "delay": 1000,
  "colours": false,
  "verbose": true,
  "ignore": [
    "./node_modules","./dist"
  ],
  "watch": [
    "src/*.js","src/*.html"
  ],
  "events": {
    
    "restart": ""
  },
  "execMap": {
    
    "js": "npm run build"
  },
  "ext": "js, json",
  "env": {
    
    "NODE_ENV": "development",
    "PORT": "3000"
  }
}

rimraf

rimraf The role of ： Pack... In bags rm -rf command , Used to delete files and folders , Whether the folder is empty or not , Can be deleted

rimraf ./dist

browserify

You can use something like node Of require() The way to organize the browser side Javascript Code

// package.json  take ./src/js/index.js Inside require The code that can be parsed into the browser is placed in lib/index.js Inside 
"browserify": "browserify ./src/js/index.js -o lib/index.js",

babel

Can be es6 The grammar translates into es5 grammar
Usage can be found on the official website . Usually, there are many in the project architecture .

chalk-pipe

Create a chalk style scheme using simpler style strings

chalk

Handle terminal string style correctly

Commander.js

complete node.js Command line solutions

Inquirer.js

A common set of interactive command line user interfaces .

slash

System path character processing

minimist

Parse parameter options

dotenv

Change the environment variable from .env File loading to process.env in

dotenv-expand

Expand the environment variables that already exist on the computer

hash-sum

Very fast unique hash generator

deepmerge

Deep merge enumerable properties of two or more objects .

yaml-front-matter

analysis yaml or json

resolve

Realization node Of require.resolve() Algorithm , So you can use it asynchronously and synchronously require.resolve() For documents

semver

npm Semantic versioner for

leven

Measure the difference between two strings
One of the fastest JS Implementation one

lru-cache

Delete the cache object of the least recently used item
portfinder Automatic search 8000 to 65535 Available port number in

ora

Elegant terminal wheel

Gulp

gulp It's a flow based automated build tool , In addition to managing and executing tasks , It also supports listening to read and write files .

Grunt

Grunt It's a JavaScript Task runner , Use... Itself JavaScript Development , Flexible management of inter task dependencies and Perform defined tasks

envinfo

Generate troubleshooting software problems ( Such as operating system 、 Binary version 、 browser 、 Installed language, etc ) General details required when reporting

memfs

Memory file system and Node’s fs API The same implementation

execa

Process execution for humans

webpack-merge

Used to join arrays and merge objects , To create a new object

webpack-chain

Use chain API To generate simplification webpack Version configuration changes

strip-ansi

Remove from a string ANSI Escape code

address

Get the... Of the current machine IP, MAC and DNS The server .

default-gateway

Through to OS Routing interface exec Call to get the default gateway of the machine

joi

JavaScript The most powerful schema description language and data validator .

fs-extra

Added not included in native fs File system method in module , And to fs Method added promise Support

Acorn

A small, fast JavaScript Parser , Use it completely JavaScript To write .

zlib.js

ZLIB.js yes ZLIB(RFC1950), DEFLATE(RFC1951), GZIP(RFC1952) and PKZIP stay JavaScript Realization .

fis3

FIS3 Front end oriented engineering construction system . Solve performance optimization in front-end engineering 、 Resource loading （ asynchronous 、 Sync 、 On demand 、 Preloading 、 Dependency management 、 Merge 、 Embedded ）、 Modular development 、 Automation tools 、 The development of specification 、 Code deployment and so on .

rollup

Focus on ES6 modularization , A small piece of code can be compiled into larger or more complex content , For example, libraries or applications .

webpack

Webpack It's a module packer . Its main purpose is to bind JavaScript File to use in the browser , But it can also convert 、 Bundle or package almost any resource or asset

parcel

Parcel Is a zero configuration network building tool . It combines a great development experience out of the box with an extensible architecture , You can transform your project from just getting started to a mass production application .

vite

One through native ES Module is the development server that serves your source files , It has rich built-in functions and surprisingly fast hot module replacement (HMR).
A build command , Compare your code with Rollup Tied together , Pre configured to output highly optimized static assets for production .

yuicompressor

YUI Compressor It's a JavaScript compressor , In addition to deleting comments and spaces , It also uses the smallest possible variable name to confuse local variables . This confusion is safe , Even if you use something like ‘eval’ or ‘with’ And so on （ Although compression is not optimal in these cases ） And jsmin comparison , The average savings are about 20%.
YUI Compressor It can also safely compress CSS file . According to the file extension （js or css） Decide which compressor to use