commonjs和ES6模块的区别

对比commonjs和ES6，了解前端模块化机制

commonjs 规范

1、commonjs应用于nodejs模块化管理，是nodejs实现的一套模块化机制。

2、commonjs属于动态编译，运行时才确定加载模块，输入时需查找对象属性，所以无法做到按需加载，总是引入整个模块对象。

3、模块导出的是值得拷贝各个引用互不影响。

4、this指向当前模块。

ES6 module

1、es6的模块化可以应用在浏览器和node服务端。

2、es6模块的设计思想，是尽量静态化，在编译时就确定模块的依赖关系以及输入和输出的变量，其静态编译使得可以编译时就确认要使用的模块中的内容可做按需加载。

3、模块导出的是值得引用，若其中引用被修改，下次引用时得到的是修改后的值。

4、this指向undefined。

import zw from './a' 
import('./b').then(res => {
  console.log(zw) // b模块修改后的zw的值
})

扩展

webpack打包时默认会模拟一套类commonjs规范的加载器，如果有使用spliteChunk抽离出runtime的话，可以查阅相关代码，所以webpack默认是无法做到按需加载的，像import { Button } from 'Antd'这样的语句会打包Antd提供的所有模块，并使用其中的babel模块，我们可以引入babel-plugin-component或者babel-plugin-import来解决这个问题。

babel 能提前将 es6 的 import 等模块关键字转换成 commonjs 的规范。这样 webpack 就无需再做处理，直接使用 webpack 运行时定义的 webpack_require 处理。而babel-plugin-component就做了一件事，将 import { Button } from 'antd' 转换成了 import Button from 'antd/lib/button'，这样即便转成commonjs规范也只引入了一个库文件

深夜打卡
~~水了一篇，开心٩(๑❛ᴗ❛๑)۶~~

City Corner