前端构建演进

inier
395 阅读4分钟

互联网的蓬勃发展，促使了web开发领域中前后端的分离（C端、B端）。H5混合开发、H5活动/游戏开发等业务日趋膨胀，项目架构也越来越复杂，其开发和构建的体验也变得越来越重要。

image-20210329145830266

一、前端进化

先来简单回顾一下前端的进化方向及进程。

1、前端职业化

前端作为独立职业岗位存在。主要是从两部分人员转化而来：1. 网站美工；2.后端开发。

image.png

2、前端模块化

这里的模块化特指js代码的逻辑隔离模式(注意与业务模块的差异)，经历了几个阶段：青铜（<=ES3）、白银、黄金（<=ES5）和 王者（>=ES6）。

img

  • 青铜（<=ES3）：全局function模式，将不同的功能封装成不同的全局函数，模块关系模糊；

  • 白银（<=ES3）：通过操作原型、简单对象封装等，减少了全局变量，解决命名冲突。代表：Prototype、Mootools；

  • 黄金（<=ES5）：IIFE模式，利用**匿名函数自调用(闭包)**来划分模块（原生js或Jquery），隔离模块间的影响，代表：jQuery；

  • 铂金（<=ES5）：AMD和CMD异步规范、CommonJS同步规范, 代表：require.js、dojo、sea.js；

img
  • 王者（>=ES6）：ESM规范，原生支持，主流浏览器和服务器通用的模块解决方案。

UMD规范，糅合AMD和CommonJS，先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。主流的库都采用这种模式，对外提供支持。随着ESM规范的发展，也开始提供ESM包，代表：lodash/lodash-es。

3、前端组件化

从源代码的组织形式来看，组件化和模块化都是分离关注点。但两者的维度不同。模块化是从代码逻辑的角度进行划分的，更注重职责分离，单一原则。而组件化则着重从UI角度划分，整合script、style及template等，更强调UI层面的复用。前端主流的组件化方案有：React、Vue、Angular。

img

image.png

4、前端工程化

前端工程化主要指项目的开发、构建体系化。前端开发规模的扩大推动了前端工程化的发展，发展阶段：石器时代、青铜时代、白银时代、黄金时代。

  • 石器时代（纯手工）：手动预览文件、刷新文件、手工打包构建；

  • 青铜时代（脚本式）：通过编写bash或nodejs编写任务脚本，实现命令式的热更新(HMR)和自动打包，代表：Grunt、Gulp；

image.png

  • 白银时代（Bundle）：通过集成式构建工具完成热更监听(HMR)，兼容打包，如babel转换js、postcss转换css等，代表：Webpack、Rollup、Parcel；

image.png

  • 黄金时代（Bundleless）：通过浏览器解析原生ESM模块实现Bundleless的开发预览及热更新(HMR)，直接不打包发布或采用webpack等集成式工具兼容打包，以保证兼容性，代表：esbuild、snowpack、vitejs。

image.png

esbuild是采用go语言编写的bundler，对标tsc和babel，只负责ts和js的转换。

5、前端工业化

通过可视化UI、可视化流程引擎、设计稿自动转化代码、Puppeteer、Severless、自动化测试、自动化CI/CD等先进技术，实现代码的自动化生成、测试到部署上线的完全自动化。打通前置后置接口，实现前端工业化生产。目前这个进程还处于初级阶段，代表：简道云、imgcook、Vercel等。

image.png

二、主流方案（Bundle）

目前主流的方案是还是基于打包实现的，这里推荐一些优秀的方案：

  1. babel + webpack + plugins

    webpack 功能最强大，应用也最广泛，最新版本v5。不过配置的心智负担更重一些。常见的做法是基于各框架的模板工程或脚手架进行扩展补充，如：

    • create-react-app：react官方的脚手架工具，可以快速创建react项目。如果需要扩展开发，可以配合 craco 或 customize-cra 来自定义webpack配置。
    • Vue CLI：vue官方的脚手架工具，可以快速创建vue项目。
    • Create Next App: Next.js 框架（基于 react.js 的通用应用框架）的脚手架工具。
    • create-nuxt-app：Nuxt.js 框架（基于 vue.js 的通用应用框架）的脚手架工具。

  2. babel + rollup + plugins

    rollup 最初是用于处理工具库的打包。现在也提供丰富的插件来支持项目打包。较成熟的案例是 UmiJS 在使用。

  3. babel + parcel + plugins

    parcel 的特点是零配置和打包速度，适用于短平快的项目。基于它的脚手架我不太熟悉，欢迎补充。

image-20210329150358601

针对以上三种方案，长期项目的话，react推荐UmiJS、Create Next App，官方流派的可自己扩展create-react-app；vue的话，如果需要服务端渲染，可选择create-nuxt-app，普通项目vue CLI也很方便。而对于短平快的临时项目，parcel能够秒开项目，爽惨。

建议：对于固定团队来说，最好的方案是基于业务选择一种方案，配置几种基础模板，集成代码检查、git提交检查、CI/CD等，以便快速开新副本。

这里再推荐一个快速配置模板工程的小工具：createapp.dev/

三、未来方案（Bundleless）

目前 snowpack v3 和 vite v2 方案还不够成熟，snowpack相对成熟一些，但都还未经大量实践考验。暂不建议应用到生产环境中。

持续关注中，后续会推出相关的实践。

感谢阅读。

本文为作者原创，图片来源于网络，若有侵权请联系作者删除!

avatar
文章
阅读
粉丝