commonJS和ES6模块化的区别

·  阅读 297

一、简述区别

在 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命令是异步加载,有一个独立的模块依赖的解析阶段。 上述差异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" 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字段。它有多种用法。

子目录别名

{
  "exports": {
    "./submodule": "./src/submodule.js"
  }
}
复制代码

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

main 的别名

exports字段的别名如果是.,就代表模块的主入口,优先级高于main字段,并且可以直接简写成exports字段的值。

{
  "exports": {
    ".": "./main.js"
  }
}
// 等同于
{
  "exports": "./main.js"
}

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

条件加载

利用.这个别名,可以为 ES6 模块和 CommonJS 指定不同的入口。目前,这个功能需要在 Node.js 运行的时候,打开--experimental-conditional-exports标志。

{
  "type": "module",
  "exports": {
    ".": {
      "require": "./main.cjs",
      "default": "./main.js"
    },
    //别名
    "./feature": "./lib/feature.js",
  }
}
复制代码
分类:
前端