前端模块化

 

模块

每次谈到模块都有点懵懵懂懂。CommonJS，AMD，以及ECMA6 三者又是什么关系，为什么需要模块加载，如何实现模块加载，这都是问题。

 

为什么需要模块加载

模块化是一个语言能否进行大工程的一个重要标志。

比如java的Maven c的include python的import

传统我们的前端开发，都是直接通过script标签引入js代码，比如常见的jQuery，但是这样子所有的模块都都声明变量在全局作用域，当然作用域问题我们可以用过命名规定和立即执行函数实现单例模式来解决，但是对于模块之间的依赖问题需要我们程序员自己定义好，在一个复杂的工程中，这就是一个噩梦，各个模块错综复杂 ，引入的js文件没有标准，模块之间的依赖关系难以梳理，在ECMA6之前浏览器并不支持模块，于是我们迫切需要一个成熟的模块体系来解决这个问题。

 

CommonJS

一般用于服务器端nodejs上，然后通过打包转化成动态加载模块

nodejs 中一般有三个路径寻找，当前项目下的 node_modules, 绝对路径，相对路径

语法

• require()

• module.exports = ...

 

AMD

异步加载，程序员需要自己管理依赖，在ECMA6出来之后，几乎很少人用了

 

 

ECMA6模块系统

• 浏览器原生支持

• 大势所趋

语法

• import .. from ..

• export

• export default

 

 

Webpack模块化原理

webpack万物皆模块，它会从指定的entry寻找依赖模块，收集成chunk 最后打包成bundle.js，这样我们只需要在index.js 文件中引入一个main.js 让main.js 来管理所有的"模块",然后交由webpack来为我们构建即可。

那么这个过程原理是什么呢？

最后html引入的是什么呢，是不是修改了script标签，转而引入bundle.js ？

模块依赖的寻找过程是怎么样的？

Babel转化成ecm5的模块是怎么实现的？

这些都是我们需要探究的问题。