前言
本文将通过前端模块化发展历史引入webpack出现的原因,解决的问题,以及目前的困境。
至今,前端模块化已经发展了有十余年了,总结起来,它们解决的问题主要有三个
- 外部模块的管理
- 内部模块的组织
- 模块源码到目标代码的编译和转换
如果对模块化历史感兴趣,推荐阅读前端模块化的十年征程
一些标志性工具诞生时间线:
生态 | 诞生时间(年) |
---|---|
Node.js | 2009 |
NPM | 2010 |
requireJS(AMD) | 2010 |
seaJS(CMD) | 2011 |
broswerify | 2011 |
webpack | 2012 |
rollup | 2018 |
vite | 2020 |
snowpack | 2020 |
前端模块化历史
在刀耕火种的年代,如果我们需要在项目里使用某个外部模块,我们可能会去官网直接把文件下载下来放到项目中,同时在入口html中通过script标签引用它。
后来NPM出现了,它是一个Node自带的模块管理工具。万千前端开发者们可以通过npm publish
的方式将自己的模块发布到NPM上去。当需要引用外部模块时,通过运行npm install [模块名]
,可以将别人的模块下载到自己项目根目录中一个叫node_modules
的子目录下。
我们可以通过配置化的文件指定引入的依赖版本,也就是package.json
文件。这就解决了外部模块管理的问题。
这个时期,我们使用script标签引入模块,一些模块需要通过一个“立即调用的函数表达式”(IIFE)去组织。
<script>
var module1 = (function