searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

前端工程化

2023-09-25 09:29:37
35
0

问题

老板: 咱们需要一个系统
员工: 好 (哐当哐当...创造一个应用)

老板: 咱们业务扩展, 还需要一个系统 员工: 好 (哐当哐当...创造第二个应用)

老板: 这些系统UI太不统一了, 能不能把他们收敛一下
员工: 好 (哐当哐当...把所有的应用融合成一个应用, 用一个UI框架) 老板: 咱们业务需要剥离, 把xx系统拆出去吧
员工: 天台见

 

前端工程化

提到工程, 我们的第一反应通常是建筑
在建筑搭建过程中, 使用一些方式去改良然后提升现有搭建效率, 即为工程化

同理, 前端工程化, 就是指对前端进行一些流程的标准化, 让开发变的更有效率, 且更好的做产品交付

 

说到工程化, 不得不提前端的发展历史.

一开始,网页页面并不复杂,只是提供一些简单的展示和交互的静态页面,甚至不需要后端。

后来需要根据不同用户返回不同的页面信息,此时我们会用后端读取数据,配合一些模板引擎,在后端拼接好内容再返回,这就是所谓的服务端渲染(SSR)。

再后来,页面变得非常复杂,于是出现了前后端分离,前端被单独拎了出来,专门写 html、CSS 和 JS,变成了 单页面应用(SPA)。

但复杂也带来了很多问题,比如多个脚本的执行时机不对、CSS 名冲突、文件过于臃肿、错误的缓存导致没能下载最新的资源,等前端复杂后出现的一系列问题。

随着 Nodejs 的诞生,我们可以用 JS 去写前端工具了。为了解决上面这些问题,前端界出现了一大堆的工具和框架, 这也变成了前端噩梦

gulp, react, babel, angular, vue, webpack, typescript, yarn, eslint

一切都是为了让前端的开发更工程化,也就是 不停地改良前端项目的开发流程

让开发者能够更高效地开发、更好地进行团队协作、让代码的风格标准化、对资源做压缩以及懒加载、更好地交付部署等。

 

前端工程化分为四个纬度:

  • 模块化
  • 组件化
  • 规范化
  • 自动化

 

模块化

模块化,指的是将代码功能做拆分,分成独立地单能相互依赖的片段。

JS 一开始的职责是给网页提供一些简单的交互,所以语法相对简单且不支持模块化。随着网页的复杂,发现原来的组织方式带来了很多问题,变得难以维护。

于是 CommonJS、AMD、ES Module 等模块系统出现了。正统标准是 ES Module,通过 import 关键字引入模块,通过 export 导出模块。

JS 的模块化将代码做了拆分,解决了全局变量污染、依赖关系不清晰、多人协作不方便、脚本引入顺序、单元测试等问题。

CSS 的第一个问题是比较难写,比如不支持选择器嵌套,对此我们可以用 CSS 预编译器(比如 Less、Sass、Stylus)去写一些更高级的语法,然后编译成 CSS。

然后是就 命名冲突问题,一种旧的方案是 BEM,就是通过将 CSS 命名 在组件化的框架中,我们有很多方案,可以用 CSS in JS,也可以用 CSS Module,或者 Vue 特有的 CSS Scoped。

html 通常是动态的,在服务端我们会使用模板引擎(template),将得到的数据注入到占位符中。在后端 Nodejs,我们可以用 pug、handlebars、ejs 等。

前后端分离后,我们通常使用的是 Vue 的 template(类似 handlebars 语法)以及 React 的 JSX。

不同类型的资源无法组织在一起,比如 JS 引擎能识别引入的 js 文件,但无法识别 css 文件。如果我们希望所有的资源都能组织再一起进行管理,要分别管理一个个不同类型的资源要方便地多。

这些需要使用到一些 loader(加载器)。webpack 是一个框架,使用者需要根据需求,添加一些 loader,去识别不同的文件,转化成 JS 代码导入。

此外还有 plugin(插件),在这整个流程中做一些处理,比如将导出的 JS 文件插入到 HTML 模板中,或是进行代码的压缩等等。

 

组件化

组件化是 UI 层面上的更细粒度的拆分,一种类似 div 等原生元素的 “自定义元素”。

组件有自己的 HTML、CSS 和 JS,同时有自己的状态,并支持嵌入到其他组件中并接受外部的数据,可以进行复用。组件化可以看作是 UI 层组织方式的一种模块化。

目前主流的 React 和 Vue 前端框架都是基于组件的。

组件化的构想是以视觉为单位进行拆分,做了结构、样式、脚本的组装,抽象出一个 “新的元素”。当然一个缺失节点样式的功能点也可能是一个组件, 比如唤起组件。

组件已经是前端开发的基石了,是一种比较合理的抽象。

 

规范化

规范是非常重要的,能让代码能够写得更容易更正确,避免一些不必要的错误。

有些规范不太能用工具进行限制,比如目录结构, 但有些规范是可以利用到工具

类型定义 – TS 是有类型的 JS,是 JS 的超集。通过类型,我们可以预测变量的行为,比如一个布尔值类型是不能被作为函数调用的,可能为 undefined 的值需要进行类型收窄后丢弃 undefined 的可能性才能使用。TS 让代码即文档,降低程序员理解代码的成本。

代码风格 – ESLint.有助于统一团队的风格,让代码看起来基本像是一个人写的,避免出现字符串一会用单引号,一会用双引号,变量命名一会用下划线风格,一会用驼峰风格.

Git提交信息 – commitlint,我们不希望看到像是 “修复了一些 bug” 这种不够具体的写法,希望具有一定的结构,比如 "fix(工作台): 修复了卡片不能滚动的问题"。

注释 – koroFileHeader, 生成格式化的注释

 

自动化

自动化指的就是被大家熟知的CI/CD。

我们将代码提交到远端仓库时,或者是给一个分支打了 tag 后,能够触发一些脚本,

将我们的项目代码做打包编译,发布成制品,

然后发布到生产环境。这些都是自动化的,流程化的。

重复的可以自动化的流程化工作,应该尽量去自动化。

让人去做,对人是一种折磨,然后也不能保证质量,因为通常流程也很复杂,即使是简单,做多了也容易错。

 

 

前端工程化核心

前端工程化的核心即是打包工具

打包工具是六边形战士

1.代码分割:指的将代码划分为可以按需 / 同时加载的多个bundles 或组件的能力。比如动态 import、提取公共依赖模块代码、多个入口文件没有重复代码、支持 ESM 的值引用模拟等。

2.哈希:资源更新时做哈希,防止资源缓存。哈希分很多种,比如文件路径名哈希、内容哈希等。

3.包引入:ES Module、CommonJS 以及从 node_modules 目录引入包的支持。

4.非 JS 资源:导入非 JS 资源的支持,像是 webpack 需要使用各种 loader 来支持,有些打包工具是内置的。

5.输出的模块格式:支持导出为 ES Module、CommonJS 等模块。

6.转换处理:比如对图片压缩、代码压缩、JS 版本降低等,在 webpack 中是使用 plugins 来实现的。

 

 

0条评论
作者已关闭评论
z****n
3文章数
1粉丝数
z****n
3 文章 | 1 粉丝
z****n
3文章数
1粉丝数
z****n
3 文章 | 1 粉丝
原创

前端工程化

2023-09-25 09:29:37
35
0

问题

老板: 咱们需要一个系统
员工: 好 (哐当哐当...创造一个应用)

老板: 咱们业务扩展, 还需要一个系统 员工: 好 (哐当哐当...创造第二个应用)

老板: 这些系统UI太不统一了, 能不能把他们收敛一下
员工: 好 (哐当哐当...把所有的应用融合成一个应用, 用一个UI框架) 老板: 咱们业务需要剥离, 把xx系统拆出去吧
员工: 天台见

 

前端工程化

提到工程, 我们的第一反应通常是建筑
在建筑搭建过程中, 使用一些方式去改良然后提升现有搭建效率, 即为工程化

同理, 前端工程化, 就是指对前端进行一些流程的标准化, 让开发变的更有效率, 且更好的做产品交付

 

说到工程化, 不得不提前端的发展历史.

一开始,网页页面并不复杂,只是提供一些简单的展示和交互的静态页面,甚至不需要后端。

后来需要根据不同用户返回不同的页面信息,此时我们会用后端读取数据,配合一些模板引擎,在后端拼接好内容再返回,这就是所谓的服务端渲染(SSR)。

再后来,页面变得非常复杂,于是出现了前后端分离,前端被单独拎了出来,专门写 html、CSS 和 JS,变成了 单页面应用(SPA)。

但复杂也带来了很多问题,比如多个脚本的执行时机不对、CSS 名冲突、文件过于臃肿、错误的缓存导致没能下载最新的资源,等前端复杂后出现的一系列问题。

随着 Nodejs 的诞生,我们可以用 JS 去写前端工具了。为了解决上面这些问题,前端界出现了一大堆的工具和框架, 这也变成了前端噩梦

gulp, react, babel, angular, vue, webpack, typescript, yarn, eslint

一切都是为了让前端的开发更工程化,也就是 不停地改良前端项目的开发流程

让开发者能够更高效地开发、更好地进行团队协作、让代码的风格标准化、对资源做压缩以及懒加载、更好地交付部署等。

 

前端工程化分为四个纬度:

  • 模块化
  • 组件化
  • 规范化
  • 自动化

 

模块化

模块化,指的是将代码功能做拆分,分成独立地单能相互依赖的片段。

JS 一开始的职责是给网页提供一些简单的交互,所以语法相对简单且不支持模块化。随着网页的复杂,发现原来的组织方式带来了很多问题,变得难以维护。

于是 CommonJS、AMD、ES Module 等模块系统出现了。正统标准是 ES Module,通过 import 关键字引入模块,通过 export 导出模块。

JS 的模块化将代码做了拆分,解决了全局变量污染、依赖关系不清晰、多人协作不方便、脚本引入顺序、单元测试等问题。

CSS 的第一个问题是比较难写,比如不支持选择器嵌套,对此我们可以用 CSS 预编译器(比如 Less、Sass、Stylus)去写一些更高级的语法,然后编译成 CSS。

然后是就 命名冲突问题,一种旧的方案是 BEM,就是通过将 CSS 命名 在组件化的框架中,我们有很多方案,可以用 CSS in JS,也可以用 CSS Module,或者 Vue 特有的 CSS Scoped。

html 通常是动态的,在服务端我们会使用模板引擎(template),将得到的数据注入到占位符中。在后端 Nodejs,我们可以用 pug、handlebars、ejs 等。

前后端分离后,我们通常使用的是 Vue 的 template(类似 handlebars 语法)以及 React 的 JSX。

不同类型的资源无法组织在一起,比如 JS 引擎能识别引入的 js 文件,但无法识别 css 文件。如果我们希望所有的资源都能组织再一起进行管理,要分别管理一个个不同类型的资源要方便地多。

这些需要使用到一些 loader(加载器)。webpack 是一个框架,使用者需要根据需求,添加一些 loader,去识别不同的文件,转化成 JS 代码导入。

此外还有 plugin(插件),在这整个流程中做一些处理,比如将导出的 JS 文件插入到 HTML 模板中,或是进行代码的压缩等等。

 

组件化

组件化是 UI 层面上的更细粒度的拆分,一种类似 div 等原生元素的 “自定义元素”。

组件有自己的 HTML、CSS 和 JS,同时有自己的状态,并支持嵌入到其他组件中并接受外部的数据,可以进行复用。组件化可以看作是 UI 层组织方式的一种模块化。

目前主流的 React 和 Vue 前端框架都是基于组件的。

组件化的构想是以视觉为单位进行拆分,做了结构、样式、脚本的组装,抽象出一个 “新的元素”。当然一个缺失节点样式的功能点也可能是一个组件, 比如唤起组件。

组件已经是前端开发的基石了,是一种比较合理的抽象。

 

规范化

规范是非常重要的,能让代码能够写得更容易更正确,避免一些不必要的错误。

有些规范不太能用工具进行限制,比如目录结构, 但有些规范是可以利用到工具

类型定义 – TS 是有类型的 JS,是 JS 的超集。通过类型,我们可以预测变量的行为,比如一个布尔值类型是不能被作为函数调用的,可能为 undefined 的值需要进行类型收窄后丢弃 undefined 的可能性才能使用。TS 让代码即文档,降低程序员理解代码的成本。

代码风格 – ESLint.有助于统一团队的风格,让代码看起来基本像是一个人写的,避免出现字符串一会用单引号,一会用双引号,变量命名一会用下划线风格,一会用驼峰风格.

Git提交信息 – commitlint,我们不希望看到像是 “修复了一些 bug” 这种不够具体的写法,希望具有一定的结构,比如 "fix(工作台): 修复了卡片不能滚动的问题"。

注释 – koroFileHeader, 生成格式化的注释

 

自动化

自动化指的就是被大家熟知的CI/CD。

我们将代码提交到远端仓库时,或者是给一个分支打了 tag 后,能够触发一些脚本,

将我们的项目代码做打包编译,发布成制品,

然后发布到生产环境。这些都是自动化的,流程化的。

重复的可以自动化的流程化工作,应该尽量去自动化。

让人去做,对人是一种折磨,然后也不能保证质量,因为通常流程也很复杂,即使是简单,做多了也容易错。

 

 

前端工程化核心

前端工程化的核心即是打包工具

打包工具是六边形战士

1.代码分割:指的将代码划分为可以按需 / 同时加载的多个bundles 或组件的能力。比如动态 import、提取公共依赖模块代码、多个入口文件没有重复代码、支持 ESM 的值引用模拟等。

2.哈希:资源更新时做哈希,防止资源缓存。哈希分很多种,比如文件路径名哈希、内容哈希等。

3.包引入:ES Module、CommonJS 以及从 node_modules 目录引入包的支持。

4.非 JS 资源:导入非 JS 资源的支持,像是 webpack 需要使用各种 loader 来支持,有些打包工具是内置的。

5.输出的模块格式:支持导出为 ES Module、CommonJS 等模块。

6.转换处理:比如对图片压缩、代码压缩、JS 版本降低等,在 webpack 中是使用 plugins 来实现的。

 

 

文章来自个人专栏
天玑实验室_前端
2 文章 | 1 订阅
0条评论
作者已关闭评论
作者已关闭评论
0
0