前端工程化模型

关于前端工程模型

---

是什么

狭义上前端就是html+css+js,广义上可以扯到用户交互，对于切图仔来说，就是html+css+js。但是随着技术的发展，前后端的分离，基于代码维护、团队协同、性能优化，由此产生了工程化技术。

这个模型就是为了将大多数前端工程的零散的知识点各个部分联系起来，从来产生一个系统性的结构，用来强化自身的记忆以及工作流，使得在面对前端工程化相关问题时可以快速反应。

工程化的一般表现形式

开发环境

• 开启服务器

• 将资源打包为浏览器环境

• 优化开发环境的工作效率

  —热更新配置
  —nodemon配置
  —代码块配置
  —代码提示插件
  —格式化插件

---

工程化应当包含的内容

基本内容

• Javascript

• Typescript

  —语法糖

• JS与TS的交互

  —tsloader解析
  —打包工具集成tsc编译自动将ts —> js

---

两个基本环境

• 浏览器内核环境
• nodejs-chromium-v8环境

---

语法糖框架

• vue
• react
• Agular

---

打包

打包工具

• webpack
• rollup
• vite

打包环境

• esbuild原生打包环境
• electron打包环境
• webapck打包环境
• rollup打包环境

---

项目配置

单项目

• vue项目
• ts项目
• electron项目

多组合项目

• vue+ts
• vue+ts+electron
• vue+ts+electron+vite

---

工程化中的环境

浏览器环境

• es-build

开发环境

• webpack

测试环境

• 测试环境为开发环境

预发布环境

• 预发布环境为开发环境

打包环境

• esbuild原生标准js打包-浏览器内核环境
• webapck打包-浏览器内核环境
• rollup打包-浏览器内核环境
• electron打包桌面程序-nodejs环境

生产环境

• 生产环境为浏览器内核环境

---

项目结构

• monorepo

配置文件

package.json

• 常见的配置项
• 最小必要配置项
• 标准化文件配置项
• 功能性配置项

tsconfig.json

• 一般配置项
• 最小配置项
• 标准化文件配置项
• 功能性配置项

tscconfig.node.json

• 常见的配置项
• 最小必要配置项
• 标准化文件配置项
• 功能性配置项

viteconfig.node.json

• 常见的配置项
• 最小必要配置项
• 标准化文件配置项
• 功能性配置项

自定义配置文件

vite.config.ts

• 插件的注册

  —vite为全局对象

• 常见的配置项

• 最小必要配置项

• 标准化文件配置项

• 功能性配置项

---

常见程序工作流

• 浏览器内核渲染工作流

常见包

常见包的依赖

特殊的loader包

• css
• html
• ts
• img
• less
• sass

常见的插件

相关文件解析配置

常见的loader配置

自定义结构配置

关联功能配置

常见功能配置

• 相对路径符号
• 热更新

自定义功能配置

• vite +electron服务组合配置

常见的疑问

• 打包环境是什么？浏览器内核环境是什么？他们有什么关系？

---

其他问题

• electron中的nativeAPI有哪些
• electron中的API对象

---