es6 模块和commonjs规范模块的区别

2022-11-02 11:20:24

引入变量

es6 导入变量只是一个符号链接，是个常量，类似于const 声明；

<script type="module">

  import mod1 from './module1.js'

  console.log(mod1);

  mod1 = 12 // 类似于const 声明 会报错误

</script>

commonjs 导入变量没有这样的限制

模块输出

es6 模块输出的是一个值的引用,引用随原始值变化而变化

// index.html

<script type="module">

    import {b} from './module1.js'

    console.log(b); // 12

    setTimeout(()=>{

      console.log(b); // 13

    },1000)

</script>

// module1.js

setTimeout(()=>{

  b++

},500)

export let b = 12

// 上面的例子中两次打印的值不同，说明es6输出的不是值的拷贝，更像是一个引用、指针、链接，能够动态改变的。

commonjs 导出的是一个普通对象,是模块的浅拷贝

exports导出的是一个对象，这个对象是通过运算得出的结果，因为是浅拷贝，如果其中包含的引用类数据，这个数据会被共享；

模块对象上有模块的相关信息：

module.id 模块的识别符，通常是带有绝对路径的模块文件名。
module.filename 模块的文件名，带有绝对路径。
module.loaded 返回一个布尔值，表示模块是否已经完成加载。
module.parent 返回一个对象，表示调用该模块的模块。
module.children 返回一个数组，表示该模块要用到的其他模块。
module.exports 表示模块对外输出的值。

module.exports是当前模块对外输出的接口，其他文件加载该模块，其实是读取module.exports；

所以一般说commonjs只能导出单个值，通过解构赋值获取其中的方法或者属性；

语法要求

es6

import export语法只能写在顶层，写在条件判断里的import会报错;
自动采用严格模式;

commonjs没有对应的限制；

静态加载

es6

在执行之前，浏览器会做静态分析编译，同时通过export输出接口；export 语法是静态数据输出的关键，是对外的接口；

commonjs

运行时加载

异步加载

es6

如果是在浏览器中，通过script type="module" 加载远程模块，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

<script>标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。

commonjs

没有异步加载的概念

循环加载

es6

在加载之前有一个静态编译的过程，期间会把输出的接口给确定下来，当被循环加载的时候，导出这些确定的接口，不需要再次被编译和加载；

es6对模块只生成一个引用，所以并不存在循环加载；但是需要我们自己保证能够加载到数据，比如下面打印出了undefined；

// a.js

import {bar} from './circle-2.js';

console.log('a.js');

console.log(bar);

export var foo = 'foo';

// b.js

import {foo} from './circle-1.js';

console.log('b.js');

console.log(foo);

export var bar = 'bar';

// b.js

// circle-2.js:3 undefined

// circle-1.js:2 a.js

// circle-1.js:3 bar

Commonjs

输出已经执行的部分;

在循环加载的过程中，其实就是类似缓存在其中起的作用；nodejs中加载过的模块缓存在require.cache中，

// 直接在nodejs中执行这个文件 commonjs-entry.js

var b = {f:12}

module.exports = b

var commonjs1 = require('./commonjs-1')

console.log(commonjs1); //  // { prop1: 1, prop2: 12 }

b.name = 1

console.log(b); // { f: 12, name: 1 }

// commonjs-1.js

var a = {prop1:1}

module.exports = a

var result1 = require('./commonjs-entry')

console.log(result1); // { f: 12 }

a.prop2 = 12

ES6 import 会自动提到模块顶端

// es6-mod1.mjs

console.log(111);

import {bar} from './es6-mod2.mjs';

// es6-mod2.mjs

console.log('222'); 

// 打印顺序

// 222

// 111

ES6 加载 CommonJS 模块

这是在nodejs中允许的，只要使用node --experimental-modules 就可以正常加载了；

因为commonjs输出的是一个对象，不能被静态分析，只能整体加载，那么就不知道输出有哪些接口，最终像import {readfile} from 'fs' 这种代码在静态分析的时候自然会报错；

// a.js

module.exports ={

	foo: 1

}

// main.mjs

import baz from ' ./a';

// 等价于 import {default as baz} from './a' 

// terminal

node --experimental-modules main.mjs

// { foo: 1 }

// { default: { foo: 1 } }

Commonjs 加载 es6 模块

在nodejs中commonjs模块是无法直接加载es6模块的；因为require在es6模块下不能使用。

webpack 打包中对es6 模块的处理

虽然es6中不能直接对import导出来的对象重新赋值，但是在前端开发过程中使用的webpack，重新赋值有什么不同呢？

结论：也会报错，但是错误的内容和原因不一样；

对下面的代码打包：

import Vue from 'vue'

console.log(Vue)

Vue = 12

结果：

var vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue */ "2b0e");

// 打包后的代码中变量Vue被替换如下：vue__WEBPACK_IMPORTED_MODULE_4__["default"];

console.log(vue__WEBPACK_IMPORTED_MODULE_4__["default"]);

Vue = 12; // 这行代码没有变化，没有替换成vue__WEBPACK_IMPORTED_MODULE_4__["default"] ，报错的就是这一行

报错原因是严格模式下全局变量未声明

码农公寓