前端进阶- 工程构建

作为自身的知识体系梳理

本文将做长期更新，初稿比较简略
第一章 简介
第二章 什么是构建
第三章 前置技能
第四章 构建能做哪些事情
第五章 什么是自动化
第六章 构建工具
第七章 命令行工具
第八章 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 -> css
vue  -> html
     -> js
     -> css
jsx  -> js

• AST语法树 https://juejin.im/post/5e0a245df265da33cf1aea91

  • 什么是语法树
  • Css
  • Less
  • Postcss
  • Js
    • recast
    • babel - 比较重要的部分 ，如何使用babel解决业务框架等语言外的问题，这个是我需要思考的。

• 正则

• 监测文件变化

  • 监测本地文件变化
  • 监测网络文件变化
  • 监测线上文件的变化 Md5时间戳

• 如何操作远程服务器

  • 本地的linux服务器目录

第四章 构建能做哪些事情

• 预处理

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

• 工程优化

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

• 页面优化速率

• 自动化测试

• 项目打包

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

• 任务管理

• 项目发布

第五章 什么是自动化

• 文件处理脚本

  • 通过命令行 下载文件

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

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

  • Jenkins 自动化构建工具

第六章 构建工具

  - Npm [https://github.com/creeperyang/blog/issues/28](https://github.com/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

第十章 规范化

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

第十 一章 杂七杂八

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