模块化打包工具的由来

模块化打包工具的由来

模块化确实是很好的解决了我们在复杂应用开发中的代码组织问题，但随着我们引入模块化，我们的应用又会产生一些新的问题。

第一个就是我们所使用的ES Modules这样一款模块系统本身就存在环境兼容问题，尽管现如今主流浏览器最新版本都已经支持这样一个特性了。

但是我们目前还没办法做到统一所有用户浏览器的使用情况，所以我们还是需要去解决兼容问题。

其次就是通过模块化的方式，划分出的模块文件会比较多，而我们前端应用又是运行在浏览器当中的。

那每一个我们在应用中所需要的文件，都需要从服务器当中请求回来，这些零散的模块文件就必将会导致浏览器频繁发出请求，从而影响我们应用的工作效率。

第三点其实也不能算是问题，应该是我们在实现js模块化基础之上的一个发散，就是我们在前端应用开发过程当中，不仅仅只有JavaScript代码需要模块化。因为随着我们应用的日益复杂，我们的html，css这些资源文件同样也会面临相同的问题。

而且从宏观角度来看，这些文件也都可以看作为前端应用当中的一个模块，只是这些模块的种类和用途跟我们的JavaScript是不同的。

对于整个开发过程而言，模块化肯定是有必要的，只是我们需要在原有的基础之上引入更好的方案或者工具去解决上面这样几个问题或者是需求，让我们开发者在应用的开发阶段可以继续享受模块化所带来的优势又不必担心模块化对生产环境所产生的一些影响。

接下来我们就对这个所谓的更好的方案或工具去提出一些设想，我们希望他们能够满足我们的这些设想。

首先第一点我们希望这样一个工具能够帮我们编译我们的代码，就是将我们开发阶段将我们包含新特性的代码直接去转换为能够兼容绝大多数环境的代码，这样一来我们所面临的环境兼容问题也就不存在了。

其次就是能够将我们散落的这些模块文件再次打包到一起，这就解决了我们浏览器当中频繁对模块文件发出请求的问题。

至于模块化文件划分，我们只是在开发阶段需要他，因为它能够更好的帮我们组织代码，但是对于运行环境，实际上是没有必要的，所以说可以选择在开发阶段通过模块化的方式去编写。

在生产阶段我们还是把他们打包到同一个文件中，最后还需要支持不同种类的前端资源类型。

这样就可以把前端开发过程当中所涉及到的，样式、图片、字体等等所有资源文件都当做模块去使用，那对于我们整个前端应用来讲的话就有了一个统一的模块化方案了。

因为我们之前介绍的那些模块化方案实际上只是针对于JavaScript的模块化方案，现在我们是想强调，针对于整个前端应用的模块化方案，这些资源呢？

我们有了这种模块化方案之后可以通过代码去控制，就可以与我们的业务代码统一去维护，这样对于整个应用来讲的话会更加合理一些。

针对于前面两个需求我们完全可以借助于之前所了解过的一些构建系统去配合一些编译工具就可以实现，但是呢对于最后一个需求，我们就很难通过这种方式去接解决了，所以说就有了接下来我们介绍的一个主题，也就是前端模块打包工具。

• 新特性代码编译

• 模块化 JavaScript 打包

• 支持不同类型的资源模块

模块打包工具

前端领域目前有一些工具就很好的解决了以上这几个问题，其中最为主流的就是webpack，parcel 和 rollup。

我们以webpack为例，他的一些核心特性就很好的满足了上面我们所说的那些需求。

首先webpack作为一个模块打包工具(Module Bundler)他本身就可以解决我们模块化javascript代码打包的一些问题，通过webpack就可以将一些零散的模块代码打包到同一个js文件中。

对于代码中那些有环境兼容问题的代码我们就可以在打包的过程当中通过模块加载器(Loader)对其进行编译转换。

其次，webpack还具备代码拆分(Code Splitting)的理念,它能够将应用当中所有的代码都按照我们的需要去打包。

这样一来我们就不用担心代码全部打包到一起产生这个文件比较大的一个问题。

我们可以把应用加载过程中初次运行的时候所必须的那些模块打包到一起，那对于其他的那些模块我们再单独存放。等应用工作过程中实际需要某个模块我们再异步去加载这个模块从而实现增量加载或者叫渐进式加载，这样的话我们就不用担心文件太碎或者是文件太大，这两个极端的问题。

最后对于前段模块类型的问题webpack支持我们在javascript中以模块化的方式去载入任意类型的资源文件，例如我们在webpack当中就可以通过javascript去直接import一个css文件。这些css文件最终会通过style标签的形式去工作。

其他类型的文件也可以有类似的这种方式去实现，这就是webpack去解决了我们上面说的这些需求。其他的打包工具也都是类似的。

总之来说，所有的打包工具都是以模块化为目标，但是这里我们所说的模块化是对整个前端项目的模块化，也就是比我们之前说的js模块化要更为宏观一些。

可以让我们在开发阶段，更好的去享受模块化所带来的的优势，同时又不比担心模块化对生产环境所产生的一些影响。这就是模块化工具的一个作用。