La différence entre es6 et commonjs

1. Différence :

1. CommonJS génère une copie d'une valeur, tandis que ES6 génère une référence à une valeur ;
2. CommonJS se charge au moment de l'exécution et ES6 génère une interface au moment de la compilation ;
3. Le besoin de CommonJS est un module de chargement synchrone et l'importation de ES6 est un chargement asynchrone, il y a une phase de résolution pour les dépendances de module indépendantes.

1.1 Le module CommonJS génère une copie d'une valeur, tandis que le module ES6 génère une référence à une valeur

Jetons un coup d'œil à l'utilisation de commonjs

1. Créez d'abord un fichier lib.js

// lib.js

const counter = 3;

const incCounter = ()=>{
    
    

  counter++

}

module.exports = {
    
    

  counter,

  incCounter

}

2. Créez à nouveau un main.js et importez-le à l'aide de commonjs

// main.js

var lib = require('./lib');

console.log(lib)

console.log(lib.counter);  // 3

lib.incCounter();

console.log(lib.counter); // 3

Une fois le module lib.js chargé, ses modifications internes n'affecteront pas la sortie lib.counter. C'est parce que mod.counter est une valeur primitive et sera mise en cache ;

Jetons un coup d'œil à l'utilisation d'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

Le module ES6 ne met pas en cache le résultat en cours d'exécution, mais récupère dynamiquement la valeur du module chargé, et la variable est toujours liée au module où elle se trouve.

Supplément : les variables importées via esmodule ne peuvent pas être réaffectées et modifiées.

1.2. Les modules CommonJS sont chargés au moment de l'exécution et les modules ES6 sont des interfaces de sortie au moment de la compilation

// CommonJS模块

let {
    
     stat, exists, readFile } = require('fs');

  

// 等同于

let _fs = require('fs');

let stat = _fs.stat;

let exists = _fs.exists;

let readfile = _fs.readfile;

L'essence du code ci-dessus est de charger le module fs dans son ensemble (c'est-à-dire de charger toutes les méthodes de fs), de générer un objet (_fs), puis de lire 3 méthodes à partir de cet objet. Ce type de chargement est appelé "chargement à l'exécution", car cet objet ne peut être obtenu qu'au moment de l'exécution, ce qui ne permet pas de faire une "optimisation statique" au moment de la compilation. Par conséquent, commonjs appartient au mode de chargement des modules lorsqu'il est réexécuté.

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

L'essence du code ci-dessus est de charger 3 méthodes à partir du module fs, et les autres méthodes ne sont pas chargées. Ce type de chargement est appelé "chargement au moment de la compilation" ou chargement statique, c'est-à-dire qu'ES6 peut terminer le chargement du module au moment de la compilation, ce qui est plus efficace que le chargement du module CommonJS ;

1.3. Le require () du module CommonJS est un module de chargement synchrone, et la commande d'importation du module ES6 est un chargement asynchrone, et il y a une phase d'analyse indépendante des dépendances du module

Chargement synchrone : Le chargement dit synchrone signifie que le processus de chargement des ressources ou des modules bloquera l'exécution des codes suivants ;

Chargement asynchrone : il ne bloquera pas l'exécution des codes suivants ;

Examinons un cas et créons le répertoire suivant ;

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

}

Exécutez la commande node index.js

// a.js文件的执行

// c.js的运行

// 3

// index.js的执行

Nous constaterons que le contenu de require bloquera l'exécution du code suivant. Parce que c.js est imprimé en premier, puis index.js est imprimé, alors require() est chargé de manière synchrone ;

// 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

On peut voir que import() charge les ressources de manière asynchrone, car c.js est affiché après index.js et ne bloquera pas l'exécution des codes suivants ;

2. Résumé :

Ce qui précède sont les différences entre commonjs et esmodule

1 : les modules CommonJS génèrent une copie d'une valeur, tandis que les modules ES6 génèrent une référence à une valeur

2 : les modules CommonJS sont chargés au moment de l'exécution et les modules ES6 sont des interfaces de sortie au moment de la compilation

3: Le require () du module CommonJS est un module de chargement synchrone, et la commande d'importation du module ES6 est un chargement asynchrone, et il existe une phase d'analyse indépendante des dépendances du module