origin

After writing business code, if you want to know webpack or VUe-CLI, it seems to be a difficult thing to get started 🙁. In the case of Webpack, we may be familiar with the configuration, but often forget it after a while, and it doesn’t look very easy to understand. It’s a good idea to learn the basics of Node and then go back and look at the tools, which are written in Node 🤯. Think about how often we’ve seen this: const path = require(‘path’); . If you’ve studied front-end frameworks but not Node, you might be confused by this sentence. You might know that it is used for paths, but you don’t know exactly where it comes from and what it is used for. That’s what I got when I first read it 🤨. It turns out that this is actually a built-in module of Node, because the build or packaging tools are executed in Node, and as long as we have Node installed, the built-in modules in node can be directly referenced without additional installation. It is highly recommended that you learn node first if you want to understand such tools, otherwise you will always be confused 🧐. Without further further, let’s take a quick look at some of node’s common built-in modules.

The node first

What is the node

First of all, Node is not a backend language but an environment, an environment that allows JS to run on a server, as if it were a browser on the server (though not quite right), but it is what makes JS a backend language.

Specifications that Node complies with

Second, Node follows the CommonJs specification. What does that mean? In fact, it specifies the way to import and export 😬, as follows:

require('./module')
module.exports = {
    a: 1,}exports.a = 1;
Copy the code

This is the specification for Node, usingrequireImport, usemodule.exportsThe export. Why does Node not support ESMimportImport, useexportExport) specification, because it appeared earlier, that’s all, and then after a while will not be changed, should be supported in the future. Also, we see this all the time in WebPackrequire()The words were not seenimport()Webpack is executed using Node, which currently only supports webPackrequire().

Here’s a chart of the various specifications (it’s easy to forget these things, just think of them as history 🙄), as follows:

Require looks for dependencies

There are two ways to write the argument in require(), one with and one without a path. Something like this:

require('./module'); // With relative paths
require('/module'); // Take an absolute path
require('module'); // No path
Copy the code

Require (‘module’) without a path, which can be either a built-in module or a third-party module. If the built-in module is not present, it will first look for a third-party module in the current directory of node_modules. If not, go to the parent directory node_modules, and then go up to the root directory node_modules. If not, go to the global directory. The other way, with a path, is to follow the path, and if not, attempts to load the current directory as a package. In addition, absolute paths are the fastest, and node also caches path searches.

Node Module Packaging

When node parses each module (js file), it wraps each module by adding a closure to the code and passing five arguments to it, thus ensuring that each module is independent, as follows:

(function(exports.require.module, __filename, __dirname) {
    // module: indicates the current module
    // __filename: the filename of the current module with the full absolute path
    // __dirName: the full absolute path of the current module
    module.exports = exports = this = {};
    // Our code is here...
    return module.exports; }) ()Copy the code

Think about how often we see __dirname in WebPack. We have neither introduced nor declared it. This is why we can use it directly 😮.

Application scenarios of Node

Generally, Node is used for the following purposes:

  • Automated build tools
  • The middle layer
  • Small projects

The first point should be the most important for students at the front end. Any engineering and automatic construction tool is written with Node. It is one of the big watershed of the front end, and a hard bone to chew, so we must take it down, or the bottleneck will come soon. If you are proficient in using node’s various modules (system modules + third-party modules), then congratulations, you have outdone the others 😎.

The advantages of the node

  • Suitable for front ends
  • Event-driven and non-blocking I/O (suitable for processing concurrent requests)
  • Good performance (others have done performance analysis)

Node Built-in module

Ok, so with that said, let’s take a look at some common node modules. I believe that mastering these tools is very helpful for you to learn webpack and vue-CLI tools ✊.

The HTTP module

This is the most basic function of Node. To start a server, run the following file with node http.js. To access this file, enter http://localhost:8888 in the browser.

// http.js
const http = require('http');
http.createServer((req, res) = > { // Start a service
  console.log('Here comes the request'); // If you open http://localhost:8888, the console will print this message
  res.write('hello'); // The value returned to the page, i.e. the page will display hello
  res.end(); // There must be an end flag, otherwise the page will remain loaded
}).listen(8888); / / the port number
Copy the code

Fs file system

However, manual operation is required. However, when JS is used as the background language, I/O operations can be performed directly on resource files on the server. This is also one of the most important modules in Node (the ability to manipulate files), which is commonly used in automated builds and engineering. Its main responsibility is to read and write files, or mobile copy delete, etc. Fs is like adding, deleting, modifying, and querying databases, except that it operates on files. Let’s look at the code use case in detail:

const fs = require('fs');

// Write to a file: fs.writeFile(path, fileData, cb);
fs.writeFile('./text.txt'.'hello xr! '.err= > {
  if (err) {
    console.log('Write failed', err);
  } else {
    console.log('Write successful'); }});// Read the file: fs.readfile (path, cb);
fs.readFile('./text.txt'.(err, fileData) = > {
  if (err) {
    console.log('Read failed', err);
  } else {
    console.log('Read successful', fileData.toString()); // fileData is a binary file. Non-media files can be converted using toString}});Copy the code

Note that fileData in readFile is the original binary file 🤨 (em… It can be used for non-media files such as plain texttoString()Once converted, files of the media type will be read as streams later, if forcedtoString()The conversion will lose the original information, so don’t mess around. Binary andtoStringThe effect looks like this:In addition, fs.readFile (asynchronous) and Fs. writeFile (asynchronous) are corresponding to fs.readFileSync (synchronous) and Fs. writeFileSync (synchronous). Most methods of FS also have two versions, synchronous and asynchronous, depending on the service choice. Generally use asynchronous, do not know what to use if also use asynchronous.

The path path

This module, we should be familiar with 🧐 webpack should have seen this east east. Obviously, path deals with path-related things, as we can see by looking directly at the following common use cases:

const path = require('path');

let str = '/root/a/b/index.html';
console.log(path.dirname(str)); / / path
// /root/a/b
console.log(path.extname(str)); / / suffix
// .html
console.log(path.basename(str)); / / file name
// index.html

// path.resolve(), which is simply a patchwork path that returns an absolute path
let pathOne = path.resolve('rooot/a/b'.'.. /c'.'d'.'.. '.'e');

// Is used to print the absolute path, as shown below, where __dirname refers to the current directory
let pathTwo = path.resolve(__dirname, 'build'); // This usage is very common, you should have seen it in Webpack

console.log(pathOne, pathTwo, __dirname);
// pathOne => /Users/lgq/Desktop/node/rooot/a/c/e
// pathTwo => /Users/lgq/Desktop/node/build
// __dirname => /Users/lgq/Desktop/node
Copy the code

Well, next time you see path, you won’t be confused.

Url module

This is obviously used to deal with the url related things, and we have to master it, mainly to get the address path and parameters, like this:

const url = require('url');

let site = 'http://www.xr.com/a/b/index.html?a=1&b=2';
let { pathname, query } = url.parse(site, true); // url.parse() parses the url. True means that the parameters are parsed into objects

console.log(pathname, query);
// /a/b/index.html { a: '1', b: '2' }
Copy the code

Querystring querystring

{a: ‘1’, b: ‘2’, c: {a: ‘1’, b: ‘2’, c: {a: ‘1’, b: ‘2’, c: Querystring = ‘3’; queryString = ‘3’;

const querystring = require('querystring');

let query = 'a=1&b=2&c=3'; // A string like this can be parsed
let obj = querystring.parse(query);
console.log(obj, obj.a); // { a: '1', b: '2', c: '3' } '1'

query = 'a=1&b=2&c=3&a=3'; // If the parameters are repeated, their corresponding values will become an array
obj = querystring.parse(query);
console.log(obj); // { a: [ '1', '3' ], b: '2', c: '3' }

// Instead we can concatenate objects into strings using queryString.stringify ()
query = querystring.stringify(obj);
console.log(query); // a=1&a=3&b=2&c=3
Copy the code

assert

Let’s look directly at the following code to see what it does:

// assert.js
const assert = require('assert');

// Assert (condition, error message), which returns a Boolean value
assert(2 < 1.'Assertion failed');
Copy the code

node assert.jsRunning the code should give you the following result:Above is an example of an assertion failing. If the assertion is correct, there is no hint and the program continues silently. So what an assertion does is first determine if the condition is correct (sort of like if), and if the condition returns a value offalsePrevents the program from running and throws an error if the return value istrueThe execution continues, generally used for function intermediate and parameter judgment.

Here are two more ways to use equal:

// assert.js
const assert = require('assert');

const obj1 = { a: { b: 1}};const obj2 = { a: { b: 1}};const obj3 = { a: { b: '1'}};// assert.deepequal (variable, expected value, error message) variable == Expected value
// assert.deepStrictEqual(variable, expected value, error message) Variable === Expected value
// It also throws information when it is wrong and continues to execute silently when it is right
assert.deepEqual(obj1, obj2, 'Not waiting.'); // true
assert.deepEqual(obj1, obj3, 'Not waiting.'); // true
assert.deepStrictEqual(obj1, obj2, 'Not waiting.'); // true
assert.deepStrictEqual(obj1, obj3, 'Not waiting.'); // False, this will throw an error message
Copy the code

The stream flow

You’ve probably heard the term “stream” before, but what does it mean? Here, you can think of it as an upgrade to the fs.readFile and fs.writeFile mentioned earlier. We should know that the workflows of readFile and writeFile are to read the entire file into memory and then write it again. This method is not suitable for larger files, because it is prone to running out of memory. So what is a better way to do this? Is to read and write, the industry is often said to pipeline flow, like water through the pipe, how much water, how much water, the water pipe is the amount of resources (memory), is so big, the sample we can reasonable use a memory allocation, rather than a breath to eat chew, there is the risk of overeating (that is, memory burst 🤐).

const fs = require('fs');

// Read the stream: fs.createreadStream ();
// Write to the stream: fs.createWritestream ();
let rs = fs.createReadStream('a.txt'); // The file to read
let ws = fs.createWriteStream('a2.txt'); // The output file

rs.pipe(ws); // Connect rs and WS with pipe, and transfer data from the read stream to the output stream.

rs.on('error'.err= > {
  console.log(err);
});
ws.on('finish'.() = > {
  console.log('success');
})
Copy the code

Streaming operation, which is reading all the time, it’s a continuous process, if one side is fast and the other is slow, or one side of the error is not connected to it doesn’t matter, it will automatically handle, we don’t have to adjust the error, it’s a good module, 👍. In addition, we didn’t use the Stream module directly because it was referenced and encapsulated by the FS module, so we just used FS.

Zlib compression

This is simple to use and clear to understand, just look at the following code:

const fs = require('fs');
const zlib = require('zlib');

let rs = fs.createReadStream('tree.jpg');
let gz = zlib.createGzip();
let ws = fs.createWriteStream('tree.jpg.gz');

rs.pipe(gz).pipe(ws);  // Raw file => Compress => write

rs.on('error'.err= > {
  console.log(err);
});
ws.on('finish'.() = > {
  console.log('success');
})
Copy the code

summary

Ok 👌, above is this chapter to talk about some node knowledge (more basic, we make do to have a look). Of course, in addition to this, there are util, Buffer, Event, crypto and process and other built-in modules, here is not a repeat, I hope you can more hands more knock two code more practice, after all, the paper come zhongjae shallow 💪. If you can use node’s various modules well, then the possibilities for moving to the back end are endless 😋 (the front end is much worse than you’d think 😭). Finally, amway’s own article, do not spray, haha! 1. Build your own UI library based on Vue-CLI3 2. Build your own scaffolding based on vue-CLI