前端为什么要使用模块化? 前端模块化解决方案

今天来说一下前端的模块化。

1. 在说前端模块化之前要先了解一下前端模块化解决的哪些问题。

2. 前端为什么要使用模块化？首先来看一段代码，就没有使用模块化的。现在有一个 a.js，a.js 里面定义了一个全局的函数叫 getName，getName 里面会打印一段代码就是打印 a.js。刚刚有一个 b.js，b.js 同样是有一个全局的函数 getName，只不过它里面打印的是 b.js。

3. 有一个使用它们的调用 getName 的文件，在 html 文件中引用这 3 个 js 文件，当在浏览器中打开控制台会显示已经打印出了 b.js。这里面就有一个问题，a.js 中也定义了一个 getName，但它并没有打印出 a.js，是因为在 a.js'b.js 里面有一个相同的变量名称，相同的全局变量 getName。在使用的时候，a.js 在 b.js 引入之前先引入，所以就会导致 b.js 中的全局变量将 a.js 中的全局变量 getName 给覆盖掉了，所以调用的时候只会调用 b.js 中的 getName。

4. 这里就有第一个问题，全局变量命名冲突的问题。特别是在前端的项目中引入了多个库或者多个 js 文件中，它们的全局变量命名如果一致就会导致后者将前者给覆盖掉。

5. 再看第二个问题，就是现在 index.js 是在 a.js 与 b.js 之后才引入的，因为它里面有调用 getName 的方法，是依赖于 a.js 或者是 b.js。如果把它放在 a.js 与 b.js 之前来看一下效果，控制台出现报错，getName 方法没有定义，index.js 就与 a.js、b.js 存在依赖的关系，但是它们的依赖关系并不明确，只有去它们的代码里面去找才能发现，index.js 依赖于 a.js 或者 b.js 里面的 getName 的方法。

所以这就出现了第二个问题，就是依赖关系不明显、不明确。