es6とcommonjsの違い

記事ディレクトリ

1. 違い:

1. CommonJS は値のコピーを出力し、ES6 は値への参照を出力します;
2. CommonJS は実行時にロードし、ES6 はコンパイル時にインターフェイスを出力します;
3. CommonJS の要件は同期ロードモジュールであり、インポートES6 は非同期読み込みであるため、独立したモジュールの依存関係の解決フェーズがあります。

1.1CommonJS モジュールは値のコピーを出力しますが、ES6 モジュールは値への参照を出力します

commonjsの使い方を見てみましょう

1. まず lib.js ファイルを作成します

// lib.js

const counter = 3;

const incCounter = ()=>{
    
    

  counter++

}

module.exports = {
    
    

  counter,

  incCounter

}

2. main.js を再度作成し、commonjs を使用してインポートします。

// main.js

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

console.log(lib)

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

lib.incCounter();

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

lib.js モジュールがロードされた後は、その内部変更は出力 lib.counter に影響しません。これは、mod.counter がプリミティブ値であり、キャッシュされるためです。

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 モジュールは実行結果をキャッシュしませんが、ロードされたモジュールの値を動的にフェッチし、変数は常にそれが配置されているモジュールにバインドされます。

補足: esmodule でインポートした変数は再割り当てや変更ができません。

1.2. CommonJS モジュールは実行時にロードされ、ES6 モジュールはコンパイル時の出力インターフェイスです

// CommonJS模块

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

  

// 等同于

let _fs = require('fs');

let stat = _fs.stat;

let exists = _fs.exists;

let readfile = _fs.readfile;

上記のコードの本質は、fs モジュールを全体としてロードし (つまり、fs のすべてのメソッドをロードし)、オブジェクト (_fs) を生成し、このオブジェクトから 3 つのメソッドを読み取ることです。この種類の読み込みは「実行時読み込み」と呼ばれます。これは、このオブジェクトは実行時にのみ取得できるため、コンパイル時に「静的最適化」を行うことができないためです。したがって、commonjs は、再実行時にモジュールをロードする方法に属します。

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

上記のコードの本質は、fs モジュールから 3 つのメソッドをロードすることであり、他のメソッドはロードされません。この種の読み込みは「コンパイル時読み込み」または静的読み込みと呼ばれます。つまり、ES6 はコンパイル時にモジュールの読み込みを完了でき、これは CommonJS モジュールの読み込みより効率的です。

1.3. CommonJS モジュールの require() は同期読み込みモジュールであり、ES6 モジュールのインポートコマンドは非同期読み込みであり、モジュールの依存関係の独立した解析フェーズがあります。

同期ロード: いわゆる同期ロードとは、リソースまたはモジュールをロードするプロセスが後続のコードの実行をブロックすることを意味します。

非同期読み込み: 後続のコードの実行はブロックされません。

ケースを見て、次のディレクトリを作成してみましょう。

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

}

コマンドnodeindex.jsを実行します。

// a.js文件的执行

// c.js的运行

// 3

// index.js的执行

require の内容が後続のコードの実行をブロックすることがわかります。c.js が最初に出力され、次に Index.js が出力されるため、require() は同期的にロードされます。

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

c.js はindex.js の後に出力され、後続のコードの実行をブロックしないため、import() はリソースを非同期でロードすることがわかります。

2. 概要:

上記はcommonjsとesmoduleの違いです

1: CommonJS モジュールは値のコピーを出力しますが、ES6 モジュールは値への参照を出力します

2: CommonJS モジュールは実行時にロードされ、ES6 モジュールはコンパイル時の出力インターフェイスです

3: CommonJS モジュールの require() は同期読み込みモジュールであり、ES6 モジュールのインポートコマンドは非同期読み込みであり、モジュールの依存関係の独立した解析フェーズがあります。