一、前端脚手架工具

1. 什么是脚手架

在软件开发领域，脚手架是指通过各种工具来生成项目基础代码的技术。通过脚手架工具生成后的代码，通常已包含了项目开发流程中所需的工作目录内的通用基础设施，使开发者可以方便地将注意力集中到业务开发本身。

  1. 首先我们需要有 package.json，它是 npm 依赖管理体系下的基础配置文件。
  2. 然后选择使用 npm 或 Yarn 作为包管理器
  3. 确定项目技术栈，团队习惯的技术框架是哪种？使用哪一种数据流模块？是否使用 TypeScript？使用哪种 CSS 预处理器？等等。在明确选择后安装相关依赖包并在 src 目录中建立入口源码文件。
  4. 选择构建工具，目前来说，构建工具的主流选择还是 webpack。【vite】
  5. 打通构建流程，通过安装与配置各种 Loader 、插件和其他配置项，来确保开发和生产环境能正常构建代码和预览效果
  6. 优化构建流程，针对开发/生产环境的不同特点进行各自优化。例如，开发环境更关注构建效率和调试体验，而生产环境更关注访问性能等
  7. 选择和调试辅助工具，例如代码检查工具和单元测试工具，安装相应依赖并调试配置文件。
  8. 最后是收尾工作，检查各主要环节的脚本是否工作正常，编写说明文档 README.md，将不需要纳入版本管理的文件目录记入 .gitignore 等。

    2.自定义react脚手架

    待更新

    二、热更新技术

    1. 什么是浏览器热更新

    指的是我们在本地开发的同时打开浏览器进行预览，当代码文件发生变化时，浏览器自动更新页面内容的技术。这里的自动更新，表现上又分为自动刷新整个页面，以及页面整体无刷新而只更新页面的部分内容。

    2. webpack 中的热更新配置

    i. 纯手动

    为了同步改动效果，我们需要再次手动执行该命令。

    ii.Watch 模式

    为了摆脱每次修改文件后都需要手动执行脚本才能进行编译的问题，webpack 中增加了 watch 模式，通过监控源码文件的变化来解决上面不能自动编译问题.
    1. // webpack.config.watch.js 
    2. {... 
    3. watch: true 
    4. ...}
    需要在浏览器中进行预览，但在预览时我们会发现，即使产物文件发生了变化，在浏览器里依然需要手动点击刷新才能看到变更后的效果。

    iii. Live Reload

    为了使每次代码变更后浏览器中的预览页面能自动显示最新效果而无须手动点击刷新，我们需要一种通信机制来连接浏览器中的预览页面与本地监控代码变更的进程.
    1. webpack.config.js 
    2. {... 
    3. devServer: { 
    4.  contentBase: './dist', //为./dist目录中的静态页面文件提供本地服务渲染 
    5.  open: true          //启动服务后自动打开浏览器网页 
    6. } 
    7. ...}
    服务还加载了路径前缀名为 /sockjs-node 的 websocket 链接。通过这个 websocket 链接，就可以使打开的网页和本地服务间建立持久化的通信

    iv. Hot Module Replacement

    第四种配置就是我们常说的 HMR（Hot Module Replacement，模块热替换）了。为了解决页面刷新导致的状态丢失问题，webpack 提出了模块热替换的概念。
    1. // webpack.config.hmr.js 
    2. {... 
    3. entry: './src/index1.js', 
    4. ... 
    5. devServer: { 
    6.  ... 
    7.  hot: true 
    8. },

    3.webpack 中的热更新原理

    image.png
  • watch 示例中体现的，对本地源代码文件内容变更的监控。
  • instant reload 示例中体现的，浏览器网页端与本地服务器端的 Websocket 通信。

  • hmr 示例中体现的，也即是最核心的，模块解析与替换功能。

    4.webpack 中的打包流程

  • module：指在模块化编程中我们把应用程序分割成的独立功能的代码模块。

  • chunk：指模块间按照引用关系组合成的代码块，一个 chunk 中可以包含多个 module。
  • chunk group：指通过配置入口点（entry point）区分的块组，一个 chunk group 中可包含一到多个 chunk。
  • bundling：webpack 打包的过程。

  • asset/bundle：打包产物。

    webpack 的打包思想可以简化为 3 点：

  • 一切源代码文件均可通过各种 Loader 转换为 JS 模块 （module），模块之间可以互相引用。

  • webpack 通过入口点（entry point）递归处理各模块引用关系，最后输出为一个或多个产物包 js(bundle) 文件。
  • 每一个入口点都是一个块组（chunk group），在不考虑分包的情况下，一个 chunk group 中只有一个 chunk，该 chunk 包含递归分析后的所有模块。每一个 chunk 都有对应的一个打包后的输出文件（asset/bundle）

5.模块热替换插件（HotModuleReplacementPlugin）

webpack 的基础插件 HotModuleReplacementPlugin，该插件作为热替换功能的基础插件，其 API 方法导出到了 module.hot 的属性中。

找到一个实现热替换的 ，看看其代码中都用到了哪些相关的 API。

三、如何正确使用 SourceMap？

1.什么是 Source Map

一种在调试时将产物代码显示回源代码的功能

2.source-map 的基本原理是

在编译处理的过程中，在生成产物代码的同时生成产物代码中被转换的部分与源代码中相应部分的映射关系表。有了这样一张完整的映射表，我们就可以通过 Chrome 控制台中的”Enable Javascript source map”来实现调试时的显示与定位源代码功能。

  • 在开发环境中，通常我们关注的是构建速度快，质量高，以便于提升开发效率，而不关注生成文件的大小和访问方式。

  • 在生产环境中，通常我们更关注是否需要提供线上 source map , 生成的文件大小和访问方式是否会对页面性能造成影响等，其次才是质量和构建速度。

    3.Webpack 中的 source map 预设

    a. 不同预设的效果总结

    质量：

    源代码 > 缺少列信息的源代码 > loader 转换后的代码 > 生成后的产物代码 > 无法显示代码
    souce-map = eval-source-map > cheap-module- > cheap- > eval = none > nosource-

    构建的速度：再次构建速度都要显著快于初次构建速度。

    在开发环境下：再次构建的速度对我们的效率影响远大于初次构建的速度
    在生产环境下：通常不会开启再次构建，因此相比再次构建，初次构建的速度更值得关注

    包的大小和生成方式：

    在开发环境下我们需要关注速度和质量来保证我们的高效开发体验

    b.预设推荐

    开发环境下 Source Map 推荐预设：’eval-source-map’
    生产环境: source-map、 false

    4.几种工具和脚手架中的默认预设

  • Webpack 配置中:则使用默认值 eval，即速度与 devtool:false 几乎相同、但模块代码后多了 sourceURL 以帮助定位模块的文件名称。

  • create-react-app 中，
    • 在生产环境下，根据 shouldUseSourceMap 参数决定使用‘source-map’或 false；
    • 在开发环境下使用‘cheap-module-source-map’（不包含列信息的源代码，但更快）。

  • vue-cli-service 中，与 creat-react-app 中相同

    四、Mock 工具如何快速进行接口调试

    1.什么是 Mock？

    Mock 在程序设计中是指使用模拟（Mock）的对象来替代真实对象，以测试其他对象的行为。而在前端开发流程中，我们说的 Mock 通常是指模拟数据（俗称假数据）以及生成和使用模拟数据的工具与流程

    2.选择 Mock 方案的考量标准

  • 仿真度：从接口名称、调用方法、请求头信息到返回头信息，返回值字段一致性越高，在后期切换到联调实际接口时花费的时间越短。

  • 易用性：需要具备将接口文档自动转换为 Mock 接口的能力
  • 灵活性：不同条件下返回不同数据的 Mock 期望能力

    3.几种主流的 Mock 工具介绍

    a.Mock.js

    数据模板定义规范（Data Template Definition, DTD）

    约定了可以通过“属性名|生成规则：属性值”这样的格式来生成模拟数据，例如（完整示例代码参见 04_mock）：
    1. Mock.mock({
    2. "str|1-100": '1'
    3. })
    4. //Result: str为1-100个随机长度的字符串'1'。例如{str: '11111'}

    与数据占位符定义规范（Data Placeholder Definition, DPD）

    数据占位符定义规范则是对于随机数据的一系列常用类型预设，书写格式是’@占位符（参数 [, 参数] ）’
    1. Mock.mock('@city(true)')
    2. //Result: 随机中国省份+省内城市数据，例如："吉林省 辽源市"
    Ajax 请求拦截：Mock.mock 方法中支持传入 Ajax 请求的 url 和 type，用于拦截特定 url 的请求，直接将模拟数据作为响应值返回
    数据验证：Mock.valid 方法，验证指定数据和数据模板是否匹配。这一功能可以用于验证后端 API 接口的返回值与对应 Mock 数据的规则描述是否冲突。
    模板导出：Mock.toJSONSchema，将 Mock.js 风格的数据模板转换为 JSONSchema

    b.YApi

    在用

    c.Apifox

    Apifox
  1. 支持接口调试工具 Postman 的特色功能，例如环境变量、Cookie/Session 全局共享等。
  2. 对同一个接口支持多种用例管理（成功用例、错误用例等）。
  3. Mock 数据功能方面支持自定义期望，支持自定义占位符规则等。
  4. 支持生成自动业务代码和接口请求代码，支持自定义代码模板等

    五、如何提高编写代码的效率？

    1. 预处理语言

    a.使用预处理语言和预处理器

    CSS 预处理语言: Sass/Less/Stylus.

    即基于 LibSass 的 node-sass 和基于 dart-sass 的 Sass。官方推荐为 dart-sass.
    dart-sass没有下载问题。速度也不错
    1. # 如果项目中已经安装了 node-sass，需要先卸载掉
    2. npm unsinstall node-sass
    3. npm install sass -S -D

    b.Pug

    ```powershell //pug html head body p.foo Hello World //html

Hello World

```

2. 代码生成

a. Snippet

Snippet 是指开发过程中用户在 IDE 内使用的可复用代码片段

Javascript(ES6) code snippets，

提供了 JavaScript 常用的 import 、console 等语句的缩写。安装后，输入缩写就能快速生成对应语句。

以 VS Code 为例，通过选择菜单中的”Code-首选项-用户片段”

六、如何利用云开发提升团队开发效率？

1. 云开发

云开发模式是在上述远程开发模式的基础之上发展而来的，将开发环境托管，由远程开发服务器变更为云服务。个

  1. 通过容器化技术，将开发环境所需基础设施（应用程序、配置文件、IDE 插件、IDE 设定项等）集成到基础镜像中，大大提升开发环境准备的效率。
  2. 通过服务化的云开发平台，简化使用流程，解决个人使用远程开发时可能遇到的技术困难，使得刚入职的新人也能够快速上手。
  3. 对于团队而言，能够提升团队协作效率。云开发模式有利于流程规范的统一，有利于团队成员共享开发工具，同时支持多人访问相同开发环境，有助于结对编程等协作流程。
  4. 对于公司而言，使用弹性化的云端容器环境有利于资源利用率的提升和硬件资产成本的降低。

    2. 典型云开发产品介绍

    | 产品 | 厂商 | 基础 IDE | IDE 类型 | 代码托管方式 | | —- | —- | —- | —- | —- | | VS Codespace | 微软 | VS Code | Web/VS/VSC | 云端（Asure）/自维护 | | Gitpod | Eclipse | Theia | Web/Desktop | 云端/自维护（限制用户数量） | | CloudIDE | 阿里云 | KAITIAN IDE | Web | 云端 | | Cloud Studio | Coding.net（腾讯云） | VS Code | Web | 云端（5 个工作空间） | | Cloud9 | AWS | Cloud9 | Web | 云端（AWS） |

3.云开发模式的技术要素

WebIDE，容器化，以及能够对接其他云服务。

七、如何用更少的代码实现更灵活的需求

1.什么是低代码开发

低代码开发（Low-Code Development，LCD），是一种很早被提出（2011）的开发模式，开发者主要通过图形化用户界面和配置来创建应用软件，而不是像传统模式那样主要依靠手写代码。对应的，提供给开发者的这类低代码开发功能实现的软件，称为低代码开发平台（Low-Code Development Platform， LCDP）。

基于编写 JSON 的开发方式，和基于可视化操作平台的开发方式

2.基于编写 JSON 的低代码开发

a.项目前端部分的最终呈现：

  1. 一个项目的前端部分本质上呈现的是通过路由连接的不同页面。而前端开发的目标就是最终输出页面的展示与交互功能。
  2. 如果学过浏览器基本原理，每一个页面的内容在浏览器中，最终都归结为DOM 语法树（DOM Tree）+ 样式（Style）+ 动态交互逻辑（Dynamic Logic）。

  3. 在组件化开发的今天，一个规范定义的组件包含了特定功能的 DOM 子树和样式风格：组件树（Component Tree）+ 动态交互逻辑（Dynamic Logic）。

    b.而基于 JSON-Schema 的低代码开发的切入逻辑是：

  4. 在特定场景下，例如开发中后台增删改查页面时，大部分前端手动编写的代码是模式化的

  5. 页面组件结构模板和相应数据模型的代码组织，可以替换为更高效的 JSON 语法树描述。

  6. 通过制定用于编写的JSON 语法图式（JSON Schema），以及封装能够渲染对应 JSON 语法树的运行时工具集，就可以提升开发效率，降低开发技术要求。

    c.缺点

  7. 输入效率

  8. 学习记忆成本：
  9. 复用性和可维护性：

  10. 问题排查难度增加,

    3.基于可视化操作平台的低代码开发

    拖拽实现

    平台本身的很多方面也会直接影响使用者的产出：

  11. 首先，平台的功能完备性直接决定了用户产出的上限。【尽可能覆盖所有场景】

  12. 其次，平台的逻辑自洽性决定了用户产出的质量。【不同部分的组织规则】

  13. 最后，平台提供的交互易用性决定了用户的产出效率。【细节的控制】

    八、无代码开发模式的出现

    1.开发模式出现的原因：

  14. 有需求量大且更新频率快的小型项目：例如不同主题内容的运营活动页面、招聘页面等。

  15. 这些项目流程模式基本相同但又具有一定的定制性。
  16. 开发人员成本昂贵，供不应求。

  17. 非互联网企业缺少技术资源。

    2. 什么是无代码开发

    无代码开发（No-Code Development / Codeless Development）是指通过非手写代码工具来产出代码的方式。这类工具被称为：无代码开发平台（No-Code Development Platform，NCDP）。

    3.无代码开发模式进一步细分为两类：

    a.一类完全面向非开发人员

  18. 企业内部的定制化搭建平台

  19. 外部无代码搭建平台

如百度 H5，对应开发的目标产品主要是模式化的 C 端活动与其他 H5 页面类型（例如招聘页面，测试小游戏等）

b.面向准开发人员的无代码开发产品

  1. 更为多样化的应用场景
  2. 目标人群的变化：

缺少代码经验且希望开发全栈产品的个人或团队，在目标产品和定制功能上更全面，但是相应的学习使用成本也更高。