The difference between es6 and commonjs

1. Difference:

1. CommonJS outputs a copy of a value, while ES6 outputs a reference to a value;
2. CommonJS loads at runtime, and ES6 outputs an interface at compile time;
3. The require of CommonJS is a synchronous loading module, and the import of ES6 is asynchronous loading , there is a resolution phase for independent module dependencies.

1.1CommonJS module outputs a copy of a value, while ES6 module outputs a reference to a 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 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

The ES6 module does not cache the running result, but dynamically fetches the value of the loaded module, and the variable is always bound to the module where it is located.

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

1.2. CommonJS modules are loaded at runtime, and ES6 modules are compiled-time output interfaces

// 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, to load all the methods of fs), 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, resulting in no way to do "static optimization" at compile time. Therefore, commonjs belongs to the way of loading modules when it is run again.

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 CommonJS module loading;

1.3. The require() of the CommonJS module is a synchronous loading module, and the import command of the ES6 module is asynchronous loading, and there is an independent parsing phase of module dependencies

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

Asynchronous loading: it will not block the execution of subsequent codes;

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 codes;

2. Summary:

The above are the differences between commonjs and esmodule

1: CommonJS modules output a copy of a value, while ES6 modules output a reference to a value

2: CommonJS modules are loaded at runtime, and ES6 modules are compiled-time output interfaces

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