-
准备工作
两个文件,分别使用CommonJS
和ES Module
导出方法如下图: -
初识
应为说到模块化原理需要用到mode
mode
属性所以这里简单认识一下mode
通过选择
development
,production
或none
之中的一个,来设置mode
参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为production
三者之间的区别: 默认情况下是production
所以打包后的文件是被压缩丑化之后的代码如下图: 不便于我们进行源码探索,所以此时可以切换成development
模式打包成功的代码如下: 这样就方便我们阅读源码 -
写一个简单的文件使用CommonJS
模块化实现原理CommonJS
引入方法然后调用,最后将打包的入口文件改成该文件: 可以看到如下: 此时删除所有注释,空格最后格式化后代码如下: 从源码最外层可以看出最外层包裹一个立即执行函数,代码块里面也存在者一些立即执行函数,下一步将所有的立即执行函数删掉再看源码: 源码注释如下: 具体流程图如下: -
准备工作如上,创建一个用ES Module
模块化实现原理ES Module
导出的文件,并且创建一个文件然后使用ES Module
引入,然后打包稿文件,删除对应的注释和格式化后代码如下: 具体流程如下: -
这里的原理和CommonJS
加载ES Module
的原理ES Module
原理基本相同,无非在调用方法的时候使用了结构的方式取到方法,而ES Module
是通过对象调用属性的方式调用方法,具体源码如下: -
这里和ES Module
加载CommonJS
的原理CommonJS
差不多相同,基本上是使用CommonJS
原理去实现,在最后调用的时候不在是使用解构的方式,而是通过属性调用的方式具体源码如下: