Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "what are the differences between es6 and commonjs". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Differences: 1, CommonJS output is a copy of the value, ES6 output is a reference to the value; 2, CommonJS is run-time load, ES6 is the compile-time output interface; 3, CommonJS require is a synchronous load module, ES6 import is asynchronous load, there is an independent module dependent parsing phase.

This tutorial operating environment: windows10 system, ECMAScript version 6. 0, Dell G3 computer.

What's the difference between es6 and commonjs?

First, the CommonJS module outputs a copy of the value, while the ES6 module outputs a reference to the value.

The usage of commonjs, let's take a look at it.

1. First create a file for lib.js

/ / lib.jsconst counter = 3 Const incCounter = () = > {counter++} module.exports = {counter, incCounter}

two。 Create a main.js again and import it using commonjs

/ / main.jsvar lib = require ('. / lib'); console.log (lib) console.log (lib.counter); / / 3lib.incCounter (); console.log (lib.counter); / / 3

After the lib.js module is loaded, its internal changes will not affect the output lib.counter. This is because mod.counter is a primitive type value that is cached

The usage of esmodule, let's take a look at it.

/ / lib.jsexport let counter = 3 incCounter export function incCounter () {counter++;} / / main.jsimport {counter, incCounter} from'. / util.mjs'console.log (counter); / / 3 incCounter () export (counter) / / 4

The ES6 module does not cache the run result, but dynamically takes the value of the loaded module, and the variable is always bound to the module in which it is located.

Add: variables imported through esmodule cannot be reassigned and modified.

The CommonJS module is loaded at run time, and the ES6 module is the output interface at compile time

/ / CommonJS module let {stat, exists, readFile} = require ('fs'); / / equivalent to let _ fs = require (' fs'); let stat = _ fs.stat;let exists = _ fs.exists;let readfile = _ fs.readfile

The essence of the above code is to load the fs module as a whole (that is, load all the methods of fs), generate an object (_ fs), and then read three methods from that object. This kind of loading is called "runtime loading" because this object is available only at run time, making it impossible to do "static optimization" at compile time. So commonjs belongs to the way the module is loaded when it is run again.

Import {stat, exists, readFile} from 'fs'

The essence of the above code is to load three methods from the fs module, while the other methods are not loaded. This kind of loading is called "compile-time loading" or static loading, that is, ES6 can complete module loading at compile time, which is more efficient than the loading mode of CommonJS modules.

Third, the require () of the CommonJS module is a synchronous loading module, and the import command of the ES6 module is loaded asynchronously, and there is an independent module dependent parsing phase.

Synchronous loading: synchronous loading means that the process of loading resources or modules will block the execution of subsequent code

Asynchronous loading: does not block the execution of subsequent code

Let's look at a case and create the following directory

| |-- a.js |-- index.js |-- c.js// a.jsconsole.log ('execution of a.js file'); const importFun = () = > {console.log (require ('. / c') .c);} importFun () module.exports = {importFun} / / index.jsconst A = require ('. / a'); console.log ('execution of index.js'); / / c.jsconsole.log ('operation of c.js'); const c = 3module.exports = {c} |

Execute the command node index.js

/ / execution of a.js file / / run of c.js / / execution of 3max / index.js

We will find that the contents of the require block the execution of subsequent code. Because c.js prints out first, and then index.js prints, require () is loaded synchronously.

/ / a.jsconsole.log ('execution of a.js file'); export const importFun = () = > {import ('. / c.js'). Then (({c}) = > {console.log (c)})} importFun () / / index.jsimport {importFun} from'. / a.js'console.log ('execution of index.js'); / / c.jsconsole.log ('run of c.js') Export const c = 3max / result / / execution of a.js file / / execution of index.js / / run of c.js / / 3

You can see that import () loads resources asynchronously because c.js is printed after index.js and does not block the execution of subsequent code

Summary: these are the differences between commonjs and esmodule

1: the CommonJS module outputs a copy of the value, and the ES6 module outputs a reference to the value

2: the CommonJS module is loaded at run time, and the ES6 module is the compile-time output interface

3: the require () of the CommonJS module is the synchronous loading module, the import command of the ES6 module is asynchronous loading, and there is an independent module dependent parsing phase.

This is the end of the content of "what are the differences between es6 and commonjs". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.