commonJS和ES6模块化的区别

朴灿烈づ我的快乐病毒、 2022-12-27 11:07 184阅读 0赞

### commonJS和ES6模块化 ###

*  一、简述区别
 *   *  1.语法差异
     *  2. 什么是运行时加载呢？
     *  3. 什么是编译时加载或静态加载呢？
     *  4.在 Node.js 中使用模块化，ES6 模块与 CommonJS 模块差异
 *  二、commonJS
 *   *  1. 基本用法
 *  三、ES6模块化
 *   *  1.语法
     *  2.在浏览器中使用ES6模块
 *  四、在 Node.js 中使用模块化
 *   *  1. 在Node.js 中使用ES6模块
     *  2. 在Node.js 中使用commonjs模块
     *  3.package.json 的 main 和exports字段

# 一、简述区别 #

> 在 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"`属性。

# 四、在 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，然后就可以从别名加载这个文件。

1.  main 的别名

// exports字段的别名如果是.，就代表模块的主入口，优先级高于main字段，并且可以直接简写成exports字段的值。
    { 
      "exports": { 
        ".": "./main.js"
      }
    }
    // 等同于
    { 
      "exports": "./main.js"
    }
    
    //由于exports字段只有支持 ES6 的 Node.js 才认识，所以可以用来兼容旧版本的 Node.js。
    { 
      "main": "./main-legacy.cjs",
      "exports": { 
        ".": "./main-modern.cjs"
      }
    }

1.  条件加载

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