一、简述区别

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

1.语法差异

• CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。而ES6模块化在浏览器和node.js中都可以用。
• 语法上面，两者最明显的差异是，CommonJS 模块使用require()和module.exports，ES6 模块使用import和export。
• 在node.js使用模块化，需要将 CommonJS 脚本的后缀名都改成.cjs，ES6 模块采用.mjs后缀文件名。或者修改package.son里面的文件，type字段为module或commonjs。

2. 什么是运行时加载呢？

// 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 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

3. 什么是编译时加载或静态加载呢？

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

4.在 Node.js 中使用模块化，ES6 模块与 CommonJS 模块差异

它们有三个重大差异。

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
   注意：CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值
   ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
   原因：CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
3. CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

上述差异1举例：

• commonjs

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3
//lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。
//这是因为mod.counter是一个原始类型的值，会被缓存。
//除非写成一个函数，才能得到内部变动后的值。
// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  get counter() {
    return counter
  },
  incCounter: incCounter,
};

• ES6

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

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
//ES6 模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。

二、commonJS

CommonJS模块基本上包括两个基础的部分：一个取名为exports的自由变量，它包含模块希望提供给其他模块的对象，以及模块所需要的可以用来引入和导出其它模块的函数。
模块功能主要由两个命令构成require()和 module.exports属性

1. 基本用法

• export

//module对象：在每一个模块中，module对象代表该模块自身。
//export属性：module对象的一个属性，它向外提供接口。
//node为每一个模块提供了一个exports变量(可以说是一个对象)，指向 module.exports。这相当于每个模块中都有一句这样的命令 var exports = module.exports;

//定义需要导出的对象
function foobar(){
  this.foo = function(){
    console.log( "Hello foo" );
  }

  this.bar = function(){
    console.log( "Hello bar" );
  }
}

//将要导出的对象添加到expor对象中
exports.foobar = foobar;

• require

var math=require（'math');
//命名的变量名和引入的模块名不必相同
var Math=require('math');
//带路径和不带路径
//如果当前目录没有node_modules目录就必须要写路径
var add=require('./add.js')

三、ES6模块化

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

1.语法

• export:

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

//export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。上面代码输出变量foo，值为bar，500 毫秒之后变成baz。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

• export default
  为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}
//其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
// export-default.js
//非匿名函数也是可以的
export default function foo() {
  console.log('foo');
}

• import:

//import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
//import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
//如果import里面是一个对象，改写对象的属性是允许的。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

• import()动态加载

// 报错
if (x === 2) {
  import MyModual from './myModual';
}

上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。

const path = './' + fileName;
const myModual = require(path);

上面的语句就是动态加载，require到底加载哪一个模块，只有运行时才知道。import命令做不到这一点。因为require是运行时加载模块，import命令无法取代require的动态加载功能。
ES2020提案 引入import()函数，支持动态加载模块。

//import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
import(specifier)

//import()返回一个 Promise 对象。下面是一个例子。
const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。
注意点：import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数
import()也可以用在 async 函数之中：

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

2.在浏览器中使用ES6模块

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

<script type="module" src="./foo.js"></script>
//浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。
<!-- 等同于 -->
<script type="module" src="./foo.js" defer></script>

四、在 Node.js 中使用模块化

1. 在Node.js 中使用ES6模块

Node.js 要求 ES6 模块采用.mjs后缀文件名。
如果不希望将后缀名改成.mjs，可以在项目的package.json文件中，指定type字段为module。

{
   "type": "module"
}

2. 在Node.js 中使用commonjs模块

Node.js 要求 ES6 模块采用.cjs后缀文件名。
如果不希望将后缀名改成.cjs，可以在项目的package.json文件中，指定type字段为commonjs。

{
   "type": "commonjs"
}

3.package.json 的 main 和exports字段

package.json文件有两个字段可以指定模块的入口文件：main和exports。比较简单的模块，可以只使用main字段，指定模块加载的入口文件。

• main

{
  "type": "module",
  "main": "./src/index.js"
}
//上面代码指定项目的入口脚本为./src/index.js，它的格式为 ES6 模块。如果没有type字段，index.js就会被解释为 CommonJS 模块。

• export
  exports字段的优先级高于main字段。它有多种用法。

1. 子目录别名

{
  "exports": {
    "./submodule": "./src/submodule.js"
  }
}
//上面的代码指定src/submodule.js别名为submodule，然后就可以从别名加载这个文件。

2. main 的别名

// exports字段的别名如果是.，就代表模块的主入口，优先级高于main字段，并且可以直接简写成exports字段的值。
{
  "exports": {
    ".": "./main.js"
  }
}
// 等同于
{
  "exports": "./main.js"
}

//由于exports字段只有支持 ES6 的 Node.js 才认识，所以可以用来兼容旧版本的 Node.js。
{
  "main": "./main-legacy.cjs",
  "exports": {
    ".": "./main-modern.cjs"
  }
}

3. 条件加载

//利用.这个别名，可以为 ES6 模块和 CommonJS 指定不同的入口。目前，这个功能需要在 Node.js 运行的时候，打开--experimental-conditional-exports标志。
{
  "type": "module",
  "exports": {
    ".": {
      "require": "./main.cjs",
      "default": "./main.js"
    },
    //别名
    "./feature": "./lib/feature.js",
  }
}

CommonJS和ES6模块有什么区别！

一、CommonJS 模块输出的是一个值的拷贝，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导入的变量是不能重新赋值修改的。

二、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 模块的加载方式高;

三、CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

同步加载：所谓同步加载就是加载资源或者模块的过程会阻塞后续代码的执行；
异步加载：不会阻塞后续代码的执行；

我们来看一个案例,创建如下的目录；

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

执行命令 node index.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

可以看的出来:import()是异步加载资源的，因为c.js是在index.js的后面打印出来的，并不会阻塞后续代码的执行；

总结：以上便是commonjs和esmodule的几个区别

1: CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
2: CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
3: CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

CommonJS 、ES6模块化规范区别

一、什么是CommonJS

我们知道Node.js的实现让js也可以成为后端开发语言，
但在早先Node.js开发过程中，它的作者发现在js中并没有像其他后端语言一样有包引入和模块系统的机制。
这就意味着js的所有变量，函数都在全局中定义。这样不但会污染全局变量，更会导致暴露函数内部细节等问题。
CommonJS组织也意识到了同样的问题，于是 CommonJS组织创造了一套js模块系统的规范。我们现在所说的CommonJS指的就是这个规范。

CommonJS 规定：

（1）每个模块内部，module 变量代表当前模块。

（2）module 变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口。

（3）加载某个模块，其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。

二、两者区别

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

1.语法上的差异

• CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。而ES6模块化在浏览器和node.js中都可以用。
• 语法上面，两者最明显的差异是，CommonJS 模块使用require()和module.exports，ES6 模块使用import和export。
• 在node.js使用模块化，需要将 CommonJS 脚本的后缀名都改成.cjs，ES6 模块采用.mjs后缀文件名。或者修改package.son里面的文件，type字段为module或commonjs。

2. 什么是运行时加载呢？

// 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 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

3. 什么是编译时加载或静态加载呢？

// ES6模块
import { stat, exists, readFile } from 'fs';

这个代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

4.在 Node.js 中使用模块化，ES6 模块与 CommonJS 模块差异

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
  注意：CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
  原因：CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
• CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。
  commonjs举例：

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3
//lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。
//这是因为mod.counter是一个原始类型的值，会被缓存。
//除非写成一个函数，才能得到内部变动后的值。
// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  get counter() {
    return counter
  },
  incCounter: incCounter,
};

ES6举例：

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

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
//ES6 模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。

三、在 Node.js 中使用模块化

1. 在Node.js 中使用ES6模块

Node.js 要求 ES6 模块采用.mjs后缀文件名。如果不希望将后缀名改成.mjs，可以在项目的package.json文件中，指定type字段为module。

{
   "type": "module"
}

2. 在Node.js 中使用commonjs模块

Node.js 要求 ES6 模块采用.cjs后缀文件名。
如果不希望将后缀名改成.cjs，可以在项目的package.json文件中，指定type字段为commonjs。

{
   "type": "commonjs"
}