前端工程化模型

### 组合环境

* vue
* vite
* ts
* electron

#### 关于依赖项

#### 插件和包的区别
##### 插件的流程

* 编写
* 注册
* 使用

#### 几种环境

* es-build原生打包环境
* Webpack打包环境
* rollup打包环境
* 开发环境
* 测试环境
* 预发布环境
* 生产环境

#### 当前目标任务

* 混合配置环境

##### 两个服务

* vite服务
* electron服务

##### 前提任务

* 编写插件在vite进程开始时配置electron服务

// 导入需要使用的类型和库
import type { Plugin } from 'vite'
import type { AddressInfo } from 'net'
import { spawn } from 'child_process'
import fs from 'fs'

// 导出Vite插件函数
export const viteElectronDev = (): Plugin => {
    return {
        name: 'vite-electron-dev',
        // 在configureServer中实现插件的逻辑
        configureServer(server) {
            // 定义初始化Electron的函数
            const initElectron = () => {
                // 使用esbuild编译TypeScript代码为JavaScript
                require('esbuild').buildSync({
                    entryPoints: ['src/background.ts'],
                    bundle: true,
                    outfile: 'dist/background.js',
                    platform: 'node',
                    target: 'node12',
                    external: ['electron']
                })
            }

            // 调用初始化Electron函数
            initElectron()

            // 监听Vite的HTTP服务器的listening事件
            server?.httpServer?.once('listening', () => {
                // 获取HTTP服务器的监听地址和端口号
                const addressInfo = server?.httpServer?.address() as AddressInfo
                const IP = `http://localhost:${addressInfo.port}`
                // 启动Electron进程
                let electronProcess = spawn(require('electron'), ['dist/background.js', IP])

                // 监听主进程代码的更改
                fs.watchFile('src/background.ts', () => {
                    // 杀死当前的Electron进程
                    electronProcess.kill()
                    // 重新编译主进程代码并重新启动Electron进程
                    initElectron()
                    electronProcess = spawn(require('electron'), ['dist/background.js', IP])
                })

                // 监听Electron进程的stdout输出
                electronProcess.stdout?.on('data', (data) => {
                    console.log(`日志: ${data}`);
                });
            })
        }
    }
}

* 开发环境下降TS编译为外部依赖，使用vue的CDN

###### 插件定义之后，需要在node的js环境中注册

#####  最后使用插件

* 关于打包工具的注册插件

##### 注册

```ts

plugins:[

vue(),
ElectronmDevPlugin()

]
```

#### 具体代码实现

* 读者vite服务信息，拼接地址，发送给electron供其启动使用

##### 使用插件

* 进程传参
* electon获得地址，成功开启服务

#### 知识点

1.插件需要注册才能使用
  定义-注册-私用

2.包只需要安装即可

### 配置热更新

* 插件中二次打包即可
* 杀死进程之后,以代码形式二次打包

#### 需要改动的文件

0.定义
1.文件包含
2.vite注册插件
2.使用

---------------

Electron开发环境
Electron桌面程序环境

* 生成exe
    
   ---可以集成为插件

-------------

### 构建供工具有哪些能力

1.相对路径配置
2.插件需要再打包工具配置文件之中注册才能使用

-----------------

### 初始化vue
### 安装TS
### 安装electron electron-builder
### vite被默认安装

-------------------

### 使用两个插件集成服务

* npm run dev ---- 开发环境热更新
* npm run build  --- electron打包环境

-------------

### 关于配置文件的关系

* 插件需要定义
* 插件需要注册
* 关于定义相对路径符号

### 打包工具的配置文件

* 负责全局环境的控制

#### 一般情况负责输出文件
#### electron负责输出桌面端程序
#### 开发环境的配置与桌面程序的混合安装

-----------------

### 将ts编译为js的工具 es-build
### 将程序打包为桌面程序eelectron-builder
### 上述程序执行的工作顺序流

* npm构建服务
* 读者进程
* 多开了一个服务?
* 不开浏览器
* 选择使用electron去打开时一样的
* 也就是说
  在main.js时vite构建服务完成后的主入口文件
* 因此，他就会主动执行
* 主动执行之后
* 就会使用electron打开开发环境
* 如果打包，就会直接进行打包
* 显性和不显是一样的

--------------

### 注意点

* vite.config.js注册插件
* ts包含插件
* package指定入口
* 那么
* 热更新的原理

   --- 实时检测文件变化
   --- 自动二次打包

-----------------

### 前端开发中的工具

#### esbuild  --- 将ts编译为桌面程序的工具
#### es
#### electron-builder 打包为桌面程序的工具
#### webpack 打包浏览器环境的工具
#### rollup 打包为浏览器环境的工具
#### vite 打包为浏览器环境的工具