工程化基建实战¶

NPM Script¶

npm script：打造一体化的构建和部署流程

npm scripts 原理¶

npm run：自动创建一个 shell，兼容不同系统平台，Linux 使用 /bin/sh ，Windows 使用cmd.exe
eslint **/*.js：任意一层子目录，任意文件名的js
node_modules/.bin 子目录中所有脚本，都能用脚本名直接调用

npm scripts 不同平台¶

un-script-os：允许针对不同平台，执行定制化脚本
cross-env：不同平台，设置环境变量

剖析 Lint¶

自动化代码校验：剖析 Lint 工具和工程化接入 & 优化方案

目标¶

合理结合各种工具，打完善的自动化流水线，做到高效率、低投入。

Prettier¶

能将清理并规范已有代码，为团队构建并统一代码风格，减少潜在Bug
美化代码，或格式化、规范化代码，是其更工整，在 “可读性” 上做文章。
支持多种语言、数据交换格式、语法规范扩展。
Prettier 与编辑器结合
- yarn add prettier pretty-quick husky -dev
- package.json 配置 husky/hooks/pre-commit: "pretty-quick --staged"
- 或用 lint-staged

Eslint¶

背景
- Javascript：不具备先天编译流程，往往在运行时才能暴露错误；
- Eslint：允许开发者在代码执行前，发现代码错误。
- 基于静态语法分析（AST）代码，在编译阶段找出代码反模式的过程
配置说明

Linter vs Prettier¶

格式化规则
- “max-len”、“no-mixed-spaces-an-tabs” 等
- 如果在 Lint 前，先经过 Prettier 纠正，Linter 就不会抛错
- 这是 Linter 和 Prettier 重叠的地方
代码质量检查
- “no-unused-var”、“no-implicit-globals”、“prefer-promise-reject-errors” 等
- Prettier 对这些规则无能为力，
- 需要 Linter 来保障代码质量和强健性

husky 和 lint-staged¶

husky：git 的一个钩子，当Git进行某一阶段，可以让开发者完成自定义操作。
lint-staged：整个项目上运行 Lint 会很慢，一般只想对更改文件进行检查
package.json 配置

"scripts": {
  "lint": "eslint--debug src/",
  "lint:write": "eslint --debug src/--fix",
  "prettier": "prettier--write src/**/*.js"
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx}":["npm run lint:write","npm run prettier","git add"]
}

背后的技术原理¶

Eslint
- 基于静态语法分析(AST)技术；
- Eslint 使用 Espree 来解析 Javascript 语句，生成 AST。
多条规则串联生效
- 多个源来定义规则
- ESLint首先收集到所有规则配置源，将所有规则归并之后，进行多重遍历：遍历由源码生成的AST，将语法节点传入队列当中之后遍历所有应用规则，采用事件发布订阅模式（类似Webpack Tapable)，为所有规则的选择器添加监听事件；
- 在触发事件时执行，如果发现有问题，会将report message记录下来最终记录下来的问题信息将会被输出。

NSR 与离线包方案¶

如何设计一个前端 + 移动端离线包方案？

关键词¶

离线包方案
NSR（Native Side Rendering）

从流程图分析 hybrid 性能痛点¶

｜

优化策略分层¶

前端业务层
- 静态资源瘦身
  - 将 Javascript 和 CSS 等静态资源进行充分压缩，或实施合理的分割策略
- 静态数据占位
  - 一种使用静态数据先填充页面，使得页面能够更迅速的呈现内容，并在数据请求成功后再加载真实数据的做法。
- 静态资源缓存
  - 常用工程手段，静态资源通过缓存策略，减少网络IO，提升性能
- 服务端渲染
  - SSR 渲染，可以直出带有数据的HTML内容，能够有效优化 FMP/FCP 等指标
- 骨架屏
  - 广义骨架屏甚至包括 Loading，提升用户体验的关键手段；
  - 在内容渲染完成之前，加载一段表意内容的 icon 或者站位区块 placeholder
  - 缓解用户焦虑心情
- 首屏分屏或按需渲染
  - 将非关键内容延迟按需渲染，而非首次加载渲染时一并完成，优先保证视口内的内容展现
- 关键渲染路径优化
  - 解析HTML 构建 DOM
  - 并行解析CSS 构建 CSSOM
  - DOM 与 CSSOM 合并为 Render tree
  - 根据 Render tree 计算出 Layout，并完成绘制
  - 优化：减少关键资源数量、关键资源 size、加载并行化
容器层
- 容器预热（抢跑）
- 数据预取（抢跑）
- 跨栈数据传递
- 小程序化(x)
通用层
- 预渲染/预加载
  - 客户端提前下载HTML模板，用户交互时，由客户端完成数据请求并渲染HTML，交给WebView容器加载
- 离线包
  - NSR，即客户端版本的SSR

离线包方案¶

流程图

离线包服务平台
- 获取离线包
- 提供离线包查询服务
- 离线包获取服务
离线包构建能力

离线包方案持续优化¶

离线包可用性和命中率
- 设计重试机制和定时轮询
- 保证离线包的完整性
离线包安全性
- 设计灰度发布状态
- 建立健全的fallback机制
用户流量考量
- 增量更新
- diff 具体文件内容
- 离线包资源的核心静态资源与图片等富媒体资源文件缓存分离
- 使用离线包后，是否会对 AB Testing 策略、数据打点策略有冲突
- HTM 是否应该最为离线包资源一部分

“万能” 项目脚手架¶

如何设计一个 “万能” 项目脚手架？

脚手架¶

脚手架：为了保证施工过程中各阶段顺序进行，而搭建的工作平台。
编程脚手架：为了新项目的启动和搭建，能够帮助开发者提升效率和开发体验。

命令行工具(CLI)¶

项目启动方式 npm init @llc/project
yarn create @llc/project
Node.js 命令行关键依赖
- 处理复杂的用户输入，完成命令输入交互
  - inquirer
  - enquirer
  - prompts
- 使终端输出彩色信息文案
  - chalk
  - kleur
- 让命令出现好看的spinner
  - ora
- 在命令行中画出 Boxes 区块
  - boxen
- 在命令行中现实进度列表
  - listr
- 进行基础命令行参数解析
  - arg
  - meow
- 进行复杂的命名行参数解析
  - yargs
  - commander

工程化基建实战¶

NPM Script¶

npm scripts 原理¶

npm scripts 不同平台¶

剖析 Lint¶

目标¶

Prettier¶

Eslint¶

Linter vs Prettier¶

husky 和 lint-staged¶

背后的技术原理¶

NSR 与离线包方案¶

关键词¶

从流程图分析 hybrid 性能痛点¶

优化策略分层¶

离线包方案¶

离线包方案持续优化¶

“万能” 项目脚手架¶

脚手架¶

命令行工具(CLI)¶

实战 Scaffold-cli¶

实战 Scaffold-cli ¶