乐趣区

关于前端:前端工程化2如何理解前端工程化

jiezi

1、前端工程化解决的问题

1.1 为什么须要前端工程化？

前端技术倒退更新快，一些大型前端我的项目须要更系统化、更规范化的去组织开发工作；以此来进步对我的项目的开发效率，缩小保护老本。

例如：

咱们做一个电商网站（相似淘宝），它有各种商品页、流动页、详情页、列表页等。它有几个特点：

  1. 每个页面性能高度相似，但还是有一些差异；
  2. 它们之间有很多公共依赖；也有一些公共的接口；
  3. 每个页面都作为一个独立的我的项目由不同的团队或者集体开发。

这时候为了防止凌乱和晋升开发效率，就须要有：

  1. 对立的开发标准 => 进步代码品质，缩小保护老本
  2. 对立的文件组织构造 => 清爽好看的目录构造，便于定位问题
  3. 对立的的模块依赖 => 雷同依赖间接复用，不须要每次新建我的项目都 copy
  4. 对立的工具配置 => 雷同配置间接复用，公布、打包、上传等工作自动化
  5. 对立的根底代码 => 雷同代码间接复用，不须要每次新建我的项目都 copy

1.2 前端工程化解决的问题：

传统的前端开发形式存在一些问题，为了晋升整体开发效率并升高代码保护老本；咱们须要实现前端开发工程化，它能解决如下问题：

1、传统语言和语法在各端的兼容性不好；

例如，当初的我的项目通常都是用 es6+ 或者 ts 去开发；而一些政企我的项目中客户（特地是国企的客户）还在用一些老电脑，应用的 IE8、IE9、IE10 等老的浏览器版本不兼容 es6+ 的执行，须要转换为 es5 甚至 es3 到浏览器去执行；

2、一些我的项目无奈应用模块化 / 组件化；

例如，以前做的一个数据可视化我的项目中有大量图表组件；这些图表组件的代码量和数量很多，全部一次加载浏览器速度很慢。所以须要思考图表组件的按需加载，那就须要 webpack 这样的工具来配合做图表的模块化和组件化。

3、反复机械式的工作 / 反复造轮子；

工程化时，咱们能够将反复代码提取成专用的模块或者库供所有人应用，防止反复造轮子；

4、没有代码格调对立、质量保证

在开发中如果没有对立的代码书写标准，那么会造成我的项目开发的凌乱，会在我的项目中遗留很多隐性的 BUG，也会导致前期我的项目保护老本升高。所以咱们通常应用 eslint、csslint 等工具来查看代码书写标准。

5、前后端拆散开发过程中，依赖后端服务反对导致效率低下

当初的我的项目开发中，为了晋升效率和我的项目解耦通常采纳了前后端拆散的形式；然而前端开发和后端开发是同时进行，大概率状况下前端所需后端接口不能及时提供；所以咱们须要应用 mock 等工具本人去模仿接口。

2、前端工程化流程

创立我的项目 => 编码 => 预览 / 测试 => 提交 => 部署

2.1 创立我的项目

在我的项目开发初期，咱们能够实用工具主动创立一些脚手架、模板、通用等文件；还可能创立我的项目构造、创立特定类型文件，例如：

  • 创立 vue 我的项目：vue-cli
  • 创立 react 我的项目：create-react-app
  • 自定义 nodejs cli 利用：依据本人需要实现的工具，能够自定义创立我的项目、生成我的项目形容文件等。

2.2 编码

在正式堆代码的时候，可能会有多人协同开发的场景；这时候须要咱们制订编码标准来束缚开发人员的编码格调，并应用工具来代替人为约定。除此之外，还能够应用一些自动化工具来替咱们主动构建、主动编译打包。

  • 格式化代码：prettier
  • 校验代码格调：eslint、stylelint
  • 编译 / 构建 / 打包 / 模块化：grunt、gulp、fis3、webpack、babel

2.3 预览 / 测试

在开发本地调试的时候，咱们能够应用一些工具来模仿服务器场景并实现热更新、热加载；即代码批改后主动编译构建，浏览器依据变动主动刷新同时还要不便咱们查看源码。

  • 本地服务：WebServer / Mock
  • 热加载 / 热更新：Live Reloading / HMR
  • 源码映射：Source Map

2.4 提交

  • Git Hooks：可在提交前进行代码品质和格调的查看
  • Lint-staged
  • 继续集成

2.5 部署

  • 自动化部署：CI/CD
  • 自动化集成：Jenkins 能够调用执行脚本，集成自动化构建、打包、部署等

3、罕用的通用脚手架工具

vue-cli —— 创立 vue 我的项目的工具
create-react-app —— 创立 react 我的项目的工具
Yeoman —— 用于创立自定义脚手架的工具
Plop —— 用于我的项目中，反复创立雷同类型的我的项目文件（例如 vue 中某个组件的 js、css 文件）

4、罕用的自动化构建工具

Grunt

  • 插件欠缺
  • 构建速度慢（每一步都有临时文件读写，步骤越多）

Gulp

  • 插件欠缺
  • 构建速度更快（没有临时文件，基于内存实现）
  • 默认反对多个工作同时执行
  • 应用形式更直观易懂

Fis

  • 百度开源我的项目
  • 大而全的构建工具，集成度高一些

Webpack

  • 精确说是模块打包工具，也能够实现自动化构建的性能

5、开发阶段实际计划

例如：咱们要开发一个大型的 vue 我的项目，最根本的前端开发工程化须要如下工作：

5.1. 创立我的项目

  1. 自定义一个 nodejs cli 利用并公布到 npm 上（办法见后续文章）
  2. 应用 nodejs cli 利用创立一个我的项目，会生成源码目录构造、模板文件、专用文件、构建工具配置等，例如：package.json、webpack.config.js、eslint.lrc 等
  3. 应用 nodejs cli 利用主动调用 npm install 等工作（可选）

5.2 编码

  1. 应用 webpack 进行构建，通过插件 babel 转换 es6+、sass/less、vue 模板代码等
  2. 应用 webpack 配合 ES Modules/CommJS 标准进行模块化开发
  3. 应用 eslint、stylelint 进行代码标准查看
  4. 应用 prettier 进行代码格式化

5.3 预览 / 测试

  1. 应用 browser-sync、webpack-dev-server 作为本地 web 服务，并进行热更新热加载
  2. 应用 webpack 配置的 source map 来调试源码
  3. 应用 webpack 配置的 proxy、Nginx 代理来解决跨域问题
  4. 应用 mock 模仿 web 服务器的 http 接口

5.4 提交

  1. 应用 git + github 做代码治理（其它 gitee 或者本人搭的仓库也可）
  2. 联合 npm scripts、git hooks、lint-staged 在提交代码前进行代码标准查看

5.5 部署

  1. 应用 Jinkens 调用命令行进行 webpack 打包，而后执行一系列后续操作
  2. 而后配合其它的工具可主动公布到咱们须要的零碎下来（依据公司需要可自定义）
退出移动版