require/exportとimport/exportは何が違いますか?

歴史的背景

require/exports

は野生規範の中から来ています.すなわち、これらの規範はJavaScriptコミュニティの開発者が自ら立案した規則であり、みんなの承認と幅広い応用を得ています.例えば、CommonJS、AMD、CMDなどです.NodeはCommonJSの仕様に従い、requireJSはAMDに従い、seaJSはCMDに従う.

は、Nodeが直接的にES6文法に適合することができないため、現段階require/exportsは依然として必要であり、必須である.

import/export

ES 6からの新しい仕様、すなわちTC 39によって制定された新しいECMAScriptバージョン.

babelが誕生した後、まだ宿主環境(各ブラウザ、Node)によって直接サポートされていないES6文法をES5にコンパイルすることができ、ES6 Moduleのimport/exportをCommonJSのrequire/exportsにコンパイルすることができる.

違い
書き方の違い
require/exports

/*    */
exports.fs = fs;      //       ，     
module.exports = fs;   //       ，         

/*    */
const fs = require('fs');   //       

import/export

/*    */
export default fs;     //                            
export const fs;       //                
export function readFile;    //                
export { readFile, read };   //     
export * from 'fs';     //       

/*    */
import fs from 'fs';       //          
import '/fs.js';          //                         
import * as fs from 'fs';    //          
import { readFile } from 'fs';   //   readFile    
import { readFile as read } from 'fs';   //      read  ，     readFile
import fs , { readFile } from 'fs';   //           readFile  

出力の違い
require/exportsrequire/exportsが出力したのは値のコピーです.つまり、値を導入すると、モジュール内部の変化はこの値に影響しません.

// test.js
let num = 0;
function addNum(){
  num++;
};
module.exports = {
  num: num,
  addNum: addNum
}

// main.js
const test = require('./test.js');

console.log(test.num);     // output： 0
test.addNum();
console.log(test.num);     // output： 0

import/exportimport/exportが出力したのは値のインデックスで、つまり、この参照は実は動的参照であり、キャッシュ値ではありません.モジュール内部が変化すると、あなたの導入値も更新されます.

// test.js
export let num = 0;
export function addNum(){
  num++;
};

// main.js
import { num, addNum } from './test.js';

console.log(num);     // output： 0
addNum();
console.log(num);     // output： 1

読み込みの違い
require/exportsCommonJSモジュールは、実行時にロードされます.CommonJSモジュールがロードしているのはオブジェクトであるため、module.exports属性であり、オブジェクトはスクリプトが実行されてから生成されるだけであり、これ以上コンパイルできない場合は「静的最適化」を行う.

const { test1, test2, test3 } = require('test');

/*     */
const _test = require('test');   //           ，          
const test1 = _test.test1;
const test2 = _test.test2;
const test3 = _test.test3;

import/exportES6モジュールはコンパイル時出力インターフェースです.ES6モジュールはオブジェクトではありません.外部インターフェースは静的な定義であり、コード静的な解析段階でしか生成されないので、効率はCommonJSモジュールよりも高いです.

import { test1, test2, test3 } from 'test';   //             ，      

非同期の差異
require/exportsCommonJSモジュールのrequireは、同期ローディングモジュールである.
import/exportES6モジュールのimportコマンドは、非同期的にロードされ、独立したモジュール依存の解析段階がある.