前台进阶- 工程构建

作为自身的知识体系梳理

本文将做长期升级，初稿比较简略第一章 简介第二章 什么是构建第三章 前置技能第四章 构建能做哪些事情第五章 什么是自动化第六章 构建工具第七章 命令行工具第八章 如何美化第九章 AST语法树第十章 杂七杂八的技术观念

第一章 简介

说到工程化技术的时候，这个宽泛的及技术名称多数都是以处理某个问题的工具的身份出现在我们面前，webpack,vue-cli3等，真正想要学的时候却无从下手。于是在此做一个简单的梳理，一个是对自身技术提炼，也希望大家一起探讨，独自做技术太孤单。

第二章 什么是构建

• 前台工程构建大部分工作要处理的是 如何用工具处理框架、规范、流程的问题
  这个位置形容不太清楚，需要再揣摩
  • 模块化资源的管理和加载，管理包括js/css的依赖管理，加载包括按需加载和请求合并，以及资源缓存与升级。
  • 所谓规范，主要是指开发和部署规范，比方哪些是模块化资源，哪些是非模块化资源，模块化资源如何包装、优化和部署，非模块化资源如何部署等，什么文件发布到什么目录，能否有CDN等等。
  • 使用工具处理模块化开发、性能优化等前台工程问题。
  • 构建，包括编译、运行、打包和文档生成等。 实现一个最简单的构建： 将js 文件中的 namestring变量名称变为nameString，尽管我们的构建工具看上去有点简陋，但它却实现了我们早期学习过程中都有遇到的代码优化要求，驼峰式命名，但也不要沾沾自喜。很显著，我们的变量不会一直都是那么几个，如何适应更多种的变化将会是一个github star量上千的项目
  • 将杂乱但熟习的桌面清除成整洁的桌面，
  • 构建能做哪些事情
    • 预解决
    • 代码维护 (eslint, stylelint) 删除console.log. debugger,注释等
    • 工程优化
      • 图片资源压缩，js 文件压缩，使用cdn替换静态资源
    • 页面优化速率
    • 自动化测试
    • 项目打包
    • 任务管理
    • 项目发布
• 自动化构建
  • 说到构建工具，我往往会在前面加「自动化」三个字，由于构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的
  • 自动编译（将less，sass等自动编译）
  • 自动合并（将页面引入的多个js文件，或者者css文件，合并为同一个且压缩）
  • 自动刷新（IDE保存，浏览器不用刷新，自动看到效果）
  • 自动部署（自动将项目打包部署到指定目录）
  • 自动同步（能够方便实现多个浏览器窗口，同步点击，输入，调试）

第三章 前置技能 mkdir touch cat grep

• 前台工程构建离不开的—Node
  • 文件操作 文件的读取，文件的写入
  • 如何删除一个文件
  • 如何从网络中取得数据
    • 如何从网络中获取文件数据
    • 如何从网络中获取信息数据
• 读懂文件
  这两年的前台发展速度非常快，也就前几年之前，前台经常接触的文件类型也就.js、.html、.css后缀的，而现在衍生出来很多.jsx、.vue、.less这类文件。现在的我们已经习惯这类忽然出现的文件类型，其实这就是工程化里很重要的部分。

less -> cssvue  -> html     -> js     -> cssjsx  -> js

• 监测文件变化
  • 监测本地文件变化
  • 监测网络文件变化
  • 监测线上文件的变化 Md5时间戳
• 如何操作远程服务器
  • 本地的linux服务器目录

第四章 构建能做哪些事情

• 预解决

• 代码维护 (eslint, stylelint) 删除console.log. debugger,注释等

• 工程优化

  • 图片资源压缩，js 文件压缩，使用cdn替换静态资源
  • bigpipe和quickling pjax pagelet

• 页面优化速率

• 自动化测试

• 项目打包

  • Map.json 资源文件表 map.json或者者mainfest.json 制作版本回滚 每次把构建好的代码生成一份tar包存到代码库里，生产/测试/开发环境可以自由切换任意版本的包。服务端的包自然携带了map.json，切换哪个就代表了回滚哪个。静态资源不用回滚，丢在静态资源服务器就好 fouber/blog/issues/8

• 任务管理

• 项目发布

第五章 什么是自动化

• 文件解决脚本

  • 通过命令行 下载文件

  • 通过命令行 定期下载文件

  • 通过shell 脚本定期帮我们下载文件

  • Jenkins 自动化构建工具

第六章 构建工具

  - Npm [ creeperyang/blog/issues/28]( creeperyang/blog/issues/28) [https://www.css88.com/archives/7025](https://www.css88.com/archives/7025)  - `Gulp`   - ` Webpack `  -  `Make`  -   `Mock` 模拟假数据  -   自动化测试工具

第七章 命令行工具

• Git Commander — 搭建自己的命令行界面
  – Web 版命令行

        *   前台使用任意框架制作，点击某功能按钮时，向后台发送带参请求        *   后台为node服务器，监听指定端口，接收到用户端请求后，调用具体功能        *   根据后台执行情况信息在前台展现的实时性要求，选择长连接或者普通连接        *   后台使用child_process或者相关类库实现命令并将信息传输至前台 

第八章 如何美化

• Chalk – 给console.log上色
  • Multispinner

第九章 AST语法树

• 什么是语法树

  • Css

  • Less

  • Postcss

  • Js

    • recast
    • babel – 比较重要的部分 ，如何使用babel处理业务框架等语言外的问题，这个是我需要思考的。

• 正则

第十章规范化

• 与其费尽心思地告诉别人要遵守某种规则，以规避某种痛苦，倒不如从工具层面就消灭这种痛苦。
  • 目录结构的制定
  • 编码规范
  • 前后台接口规范
  • 文档规范
  • 组件管理
  • Git分支管理
  • Commit形容规范
  • 定期CodeReview
  • 视觉图标规范

第十 一章 杂七杂八的技术观念

1、以原始文件为范本储存的信息不可信，你很难从文本字符串中获取你想要的那部分数据 【JSON和各类有序数据存储是每次方案设计时需要优先考虑的】
2、工程化对于我来说，是使用构建类工具处理生产开发过程中遇到的问题，没有万能药，只能尽量多的去理解各种解决问题的场景。
3、随着项目不断的增多，人员资源缺很紧缺的时候，就开始思考如何去提升效率，经常做的就是如何提取公共部分，做到最后就需要一个承载的平台。