开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

如何在浏览器端实现模块化

浏览器端的模块化

问题：

• 效率问题：精细的模块化区分带来了更多的js文件，更多的js文件带来了更多的请求，降低了页面的访问效率
• 兼容性问题：浏览器目前只支持ES6的模块化标准，并且还存在兼容性问题
• 工具问题：浏览器不支持npm下载的第三方包

这仅仅是前端工程化的一个缩影

当开发一个具有规模的程序，你将遇到非常多的非业务问题 这些问题包括：执行效率、兼容性、代码可维护性可扩展性 团队协作，测试 等等等等， 我们将这些问题称之为工程问题。工程问题与业务无关，但他深刻影响到开发进度，如果没有一个好的工具解决这些问题 将会使开发进度变得极其缓慢，同时也会让开发者陷入技术的泥潭

根本原因

为什么上面提到的问题为什么在node没那么明显，反而到了浏览器上变得如此严重

因为，在node端，运行的js文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高得多

根本原因：

在浏览器端，开发时态（devtime）和 运行时态（runtime）的侧重点不一样

开发时态：devtime

1. 模块划分越细越好
2. 支持多种模块化标准
3. 支持npm或其他包管理器下载的模块
4. 能够解决其他工程化的问题

运行时态：runtime

1. 文件越少越好

2. 体积越小越好

3. 代码内容越乱越好

4. 所有浏览器都要兼容

5. 能够解决其他运行时的问题，主要是执行效率问题

   这种差异在小型项目中表现的并不明显，可是一旦形成规模，就越来越明显，如果不解决这些问题，前端项目形成规模只能是空谈

解决办法

既然开发和运行时态有巨大的差异，因此我们需要有一个工具，这个工具能让开发者在开发时态专心写代码， 然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西

这样的工具就叫构建工具 例如（webpack）

这样以来开发者就可以专注于开发时态的代码结构，而不用担心运行时态遇到的问题了

常见的构建工具

• webpack
• grunt
• gulp
• browserify
• fis
• vite
• turbo
• 其他