前端工程化的梳理

141 阅读9分钟

1. 使用JavaScript在浏览器开发,在客户端开发,在node开发,在移动端,小程序,跨端,如此多的场景,我们在学习的时候应该怎么样去梳理方向,通常开发我们都是从增删查改的简单页面开始。

2. 学HTML css JavaScript开始,后续接触到jQuery,vue,react,angular等等框架,加入了避免过多的操作节点的思想,引起浏览器过度的重绘重排,使用css动画和不复杂的选择器来提高效率,从script标签的preload,async,defer这样的属性来控制js文件的执行,从一开始的全局导入,变成了按需导入执行,比如一个按钮,在你没有点击的时候js脚本是不会加载的,点了之前才执行,这种是目前新方向,通常框架都是先加载脚本,懒加载页面,而这种属于懒加载事件。

3. 了解深入css来实现酷炫的动画,其实就是收集各种动画脚本,从使用到模仿,到学习,这是学习的过程,通常使用HTML标签的时候,做服务器渲染我们会考虑一些标签的语义化,在框架里面也是通过内置的正则和所谓的编译器来解析这些内容,由于出现了node和框架,导致我们从jQuery的原生jsp 或者PHP转型到Ajax的前后端分离,把大部分数据处理的工作都给到了崛起的JavaScript,

为什么称为崛起,因为原本这个语言只是一个脚本,没有现在这样强大。

基于node的发布,让JavaScript具有了操作io网络底层的功能,由V8、Libuv,还有一些其它的第三方模块组成(cares异步DNS解析库、HTTP解析器、HTTP2解析器,压缩库、加解密库等)。Node.js源码分为三层,分别是JS、C++、C,Libuv是使用C语言编写,C++层主要是通过V8为JS层提供和底层交互的能力,C++层也实现了部分功能,JS层是面向用户的,为用户提供调用底层的接口。

4. js层是方便我们书写和调用底层,v8编译JavaScript来相互转化,Libuv是Node.js底层的异步IO库,但它提供的功能不仅仅是IO,还包括进程、线程、信号、定时器、进程间通信等,而且Libuv抹平了各个操作系统之间的差异。

5. Node.js是基于V8的JS运行时,它利用V8提供的能力,极大地拓展了JS的能力。这种拓展不是为JS增加了新的语言特性,而是拓展了功能模块,比如我们可以在node里使用es的规范来书写代码,并且引入了fs处理 这样的额外的能力。

6. node可以使用自己的内部核心模块,然后有自己的事件处理,网络进程,加入v8来解析JavaScript。从而让JavaScript具有处理文件的能力,也正是因为这样的能力,让现在所谓的脚手架有了基础。

7. 构建一个脚手架需要启动一个http服务,你可以利用http模块,或者基于这样的web框架,然后需要热更新,你可以同时使用类似socketio或者ws这样的脚本在浏览器或者node里书写websocket通信,在通信的过程中通过注入日志对象,来确保更新进程控制,通过处理JavaScript的字符文件的能力,从而让JavaScript的ast具有可生成,转化,解析的能力,让Babel这样的底层工具出现,提供核心功能模块,补丁额外模块,在加载转化过程基于ast语法加入钩子函数来让插件拓展成为可能,由于这个的出现,所谓的webpack把浏览器不认识的东西转化成认识的东西也是基于这样的实现功能。

8. webpack默认的处理js 需要安装babel 来提高额外的功能,比如使用最新规范的语法,注入es6转es5兼容的库,保证编译后的文件可以兼容浏览器,提高了loader来处理这是一个可拓展的函数,提供了插件机制,注入一个对象使用里面apply函数来完成对钩子编译hooks操作的监听,比如vue-loader监听每一个模块注入热更新accept.hot来保证组件化的响应热更新,也就是基于现在流行的热更新功能我们开始深挖这些场景,刚刚提到了服务http。

9. 大家都知道默认会有一个public文件夹访问静态资源,这是express这些框架处理static的能力,热更新整理如下,通过一个web服务,注入前后端ws,结合webpack的机制,让框架生态创造一个比如vue-laoder的对象,来贴合钩子监听为每一个组件都注入热更新的能力,处理不同的后缀名称,使用loader来处理从右到左一个函数处理返回。

10. 就好像react会有一个热更新的包,而vue是内置到laoder里面,监听文件的能力。是node 文件模块提供的。

11. 当文件改变就触发变化然后编译把laoder plugins webpack的配置都运行一次,然后输出的东西,在开发环境下是位于内存中,这是fs的能力,也就是即使你看不见文件位于dist下面,其实他已经在了,只是没有实体化,但却已经数据化。也就是node buffer的能力 fs结合。

12. 了解webpack的target 有web node 和客户端 然后通过控制输出 的 包的类型,就知道,这个工具,不仅仅可以在web这方面发光发热,很多基于webpack的后端接口脚手架的能力也是这个。也就是后端热更新。

13. 比如下载webpack-dev-serve 启动一个文件 然后改为target node 然后这个文件里面有express模块启动后就可以出现web服务。然后通过打包可以把我们的代码接口加密也好,发布也好。

14. 由于git与node的结合,出现了可视化的命令行界面的发布流程,你可以通过使用git的钩子 然后node的代码机制,各种检查与容器的结合,自动化的ci cd就是出现了。

15. node使用web框架 数据库连接的库 然后子进程,让你开发普通的服务基本可以满足,这也就出来了服务器渲染前后端同构出现了可能,借助框架在处理组件返回的字符串,然后响应到页面的web能力,可以结合起来做服务器渲染,

16. 服务器渲染是一种浏览器端,与服务器端同步的过程,当服务端响应了原生标签内容,与脚本文件,但却没有事件,因为没有执行,所以需要浏览器执行js脚本来完成事件的添加,对比dom的原生内容,也就是前后端内容的同步,也就是一个水合的过程。

17. 借助web服务的机制出现了history的路由,懒加载文件的出现,import的组件加载,对符合规则的js文件响应加载,减少响应的大小,各种工具的出现让浏览器的应用越发的大而精美,优化又不差。

18. webpack分割打包 压缩zip 多入口加载,结合nginx完成打包文件的部署。

19. 通常我们使用各种库,导入各种项目里,有commonjs amd esm 各种规范,

20. webpack打包处理会出现多余的内容,从让rollup占据了一席之地,可以很好的打包模块化的库,umd配置就可以完全兼容现代浏览器,不支持很老的比如ie这样的,应该说是面向现在未来,所以就有了集成了它的vite。

21. vite使用rollup做打包,esbuild做编译缓存,自己处理了模块的路径重写,热更新的引入,同时引入了rollup的插件机制,拓展了自身,让打包编译更快,使用现代浏览器的import module的能力。

22. 虽然说rollup也有自己的热更新,和自己的插件,babel基于这样的生态提供了贴合webpack和rollup打包工具各自的插件,比如babel-loader rollup-babel 之类的 库。

23. node 与 chrome 打包工具 框架 结合就推出了 客户端的electron 热更新下开发客户端,electron提供底层能力,node引入生态,chrome渲染页面,生态与打包工具让他更加强大,使用自己熟悉的框架降低成本。

24. 这样小程序使用uniapp 做移动端 小程序 app

25. 客户端使用这个,网站使用所谓的脚手架 结合组件库 框架 JavaScript的路才开始,也并未结束。

26. 在如今的时代,webgl的发展推出了three cesium 各大渲染方面的库,

27. 用来开发三D效果结合建模,实现炫酷页面,cesium结合大数据来绘制一个自定义二开的地图让数字孪生和智慧城市实现落地,webgis开发 与three建模的开发 是未来的路,虽然中间插入了区块链的东西,但脱离实际社会应用是走不远的。

28. 我们需要深挖node在使用场景方面的能力,贴合自己的能力与业务实现各方面的落地,深挖JavaScript的语法规范来帮助我们熟悉它的生态,从使用者变为贡献者,在开发项目的过程我们要把技术一部分同时也需要提高我们的软技能,比如业务文档沟通如何协调合作。让我们变得更加完美适应这个寒冬。

29. up自学前端工作两三年,一个人能力太小,聚沙成塔,抱团取火,分享知识,帮助学习,

30. 有愿意或者有问题一起钻研,新人也好,老手也好,希望在这个寒冬下,尽力生活,

31. 欢迎 一起 qq群,306671879。学习前端