What is the difference between es6 and commonjs

Difference: 1. CommonJS outputs a copy of the value, and ES6 outputs a reference to the value; 2. CommonJS is loaded at runtime, and ES6 is a compile-time output interface; 3. CommonJS require is loaded synchronously Modules, ES6's import is loaded asynchronously, and there is a resolution phase for independent module dependencies.

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the difference between es6 and commonjs

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

Let’s take a look at the usage of commonjs

1. First create a lib.js file

// lib.js
const counter = 3;
const incCounter = ()=>{
  counter++
}
module.exports = {
  counter,
  incCounter
}

2. Create a main.js again and import it using commonjs

// main.js
var lib = require('./lib');
console.log(lib)
console.log(lib.counter);  // 3
lib.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 and will be cached; let’s take a look at the usage of

esmodule

// lib.js
export let counter = 3;
export function incCounter () {
  counter++;
}

// main.js
import { counter, incCounter } from './util.mjs'
console.log(counter);  //3 
incCounter()
console.log(counter)  //4

ES6 module does not cache the running results, but dynamically Get the value from the loaded module locally, and the variable is always bound to the module in which it is located.

Supplement: Variables imported through esmodule cannot be reassigned or modified.

2. The CommonJS module is loaded at runtime, and the ES6 module is the output interface at compile time

// CommonJS模块
let { stat, exists, readFile } = require('fs');
 
// 等同于
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 fs method), generate an object (_fs), and then read 3 methods from this object. This kind of loading is called "runtime loading", because this object can only be obtained at runtime, making it impossible to do "static optimization" at compile time. Therefore, commonjs is a method of loading modules only when it is run.

import { stat, exists, readFile } from 'fs';

The essence of the above code is to load 3 methods from the fs module, and 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 method of CommonJS modules;

3. CommonJS module require () is a synchronous loading module. The import command of the ES6 module is asynchronous loading. There is an independent resolution phase of module dependencies.

Synchronous loading: The so-called synchronous loading means that the process of loading resources or modules will block subsequent Code execution;

Asynchronous loading: will 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.js
console.log('a.js文件的执行');
const importFun = () => {
  console.log(require('./c').c);
}
importFun()
module.exports = {
  importFun
}

// index.js
const A = require('./a');
console.log('index.js的执行');

// c.js
console.log('c.js的运行');
const c = 3
module.exports = {
  c
}

Execute the command node index. js

// a.js文件的执行
// c.js的运行
// 3
// index.js的执行

We will find that the content of require will block the execution of subsequent code. Because c.js is printed first, and then index.js is printed, so require() is loaded synchronously;

// a.js
console.log('a.js文件的执行');
export const importFun = () => {
  import('./c.js').then(({c})=>{
    console.log(c)
  })
}
importFun()

// index.js
import {importFun} from './a.js'
console.log('index.js的执行');

// c.js
console.log('c.js的运行');
export const c = 3

// 结果
// a.js文件的执行
// index.js的执行
// c.js的运行
// 3

It can be seen that import() loads resources asynchronously, because c .js is printed after index.js and will not block the execution of subsequent code;

Summary: The above 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 runtime, and the ES6 module is a compile-time output interface.

3: The require() of the CommonJS module loads the module synchronously, and the import command of the ES6 module loads asynchronously, with an independent parsing phase of module dependencies

[Related recommendations: javascript video tutorial 、webfrontend】

The above is the detailed content of What is the difference between es6 and commonjs. For more information, please follow other related articles on the PHP Chinese website!