学习内容：

复习如何使用git管理项目
了解了webpack打包和vite打包
了解了JavaScript事件循环底层原理

总结

git

配置name和email

git config --global user.name "xxxx"
git config --global user.email "xxx@xxx.com"

git文件状态
1. 未跟踪
2. 已跟踪
3. 暂存
4. 未修改
5. 已修改
git常用命令
1. git status 查看当前仓库的状态
2. git init 初始化仓库
3. git add <filename> 将文件切换到暂存的状态
4. git commit -m "xxx" 将暂存的文件存储到仓库中
5. git restore <filename> 恢复文件
6. git restore --staged <filename> 取消暂存状态
7. git rm <filename> 删除文件
8. git rm <filename> -f 强制删除
9. git mv from to 移动文件
10. git branch 查看当前分支
11. git branch <branch name> 创建新的分支
12. git branch -d <branch name> 删除分支
13. git switch <branch name> 切换分支
14. git switch -c <branch name> 创建并切换分支
15. git merge <branch name> 合并分支

GitHub远程仓库常用命令

git remote add origin https://github.com
# git remote add <remote name> <url>

git branch -M main
# 修改分支的名字的为main

git push -u origin main
# git push 将代码上传服务器上

git remote # 列出当前的关联的远程库
git remote add <远程库名> <url> # 关联远程仓库
git remote remove <远程库名>  # 删除远程库
git push -u <远程库名> <分支名> # 向远程库推送代码，并和当前分支关联
git push <远程库> <本地分支>:<远程分支>
git clone <url> # 从远程库下载代码

git push # 如果本地的版本低于远程库，push默认是推不上去
git fetch # 要想推送成功，必须先确保本地库和远程库的版本一致，fetch它会从远程仓库下载所有代码，但是它不会将代码和当前分支自动合并
		 # 使用fetch拉取代码后，必须要手动对代码进行合并	
git pull  # 从服务器上拉取代码并自动合并

gitignore
1. 默认情况下，git会监视项目中所有内容，但是有些内容比如node_modules目录中的内容，我们不希望它被git所管理。我们可以在项目目录中添加一个.gitignore文件，来设置那些需要git忽略的文件。

Webpack

使用步骤：
1. 初始化项目npm init -y
2. 安装依赖webpack webpack-cli
3. 在项目中创建src目录。然后编写代码
4. 执行npm webpack

配置文件（webpack.config.js）

const path = require("path")
module.exports = {
    mode: "production", 
    entry: "./src/index.js",
    output: {
    }, 
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

使用bable（将新js转旧js提高代码兼容性）

安装npm install -D babel-loader @babel/core @babel/preset-env

配置：

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

在package.json中设置兼容列表

"browserslist": [
        "defaults"
 ]

使用插件（plugin）

安装插件（html-webpack-plugin）

配置依赖

plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",
            template: "./src/index.html"
        })
    ]

开发服务器
1. 安装
  1. npm install -D webpack-dev-server
  2. 启动: npm webpack server --open
2. devtool:"inline-source-map"配置源码的映射

Vite

基本使用

Vite是一款开箱即用的打包工具

安装开发依赖vite
vite的源码目录就是项目根目录
开发命令
1. vite 启动开发服务器
2. vite bulid 打包代码
3. vite preview 预览打包后的代码

命令构建

npm create vite@latest
yarn create vite
pnpm create vite

配置文件

import { defineConfig } from "vite"
import legacy from "@vitejs/plugin-legacy"

export default defineConfig({
    plugins: [
        legacy({
            targets: ["defaults"]
        })
    ]
})

事件循环
1. 浏览器的进程模型
  1. 进程：程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
  2. 线程：一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。
    
    如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。
  3. 浏览器的主要进程（多进程多线程）
    1. 浏览器进程：主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
    2. 网络进程：负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
    3. 渲染进程：渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。
      
      默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。
  4. 渲染主线程
    1. 渲染主线程是浏览器中最繁忙的线程，需要它处理的任务（解析 HTML，解析CSS，计算样式，布局，执行js等等）
    2. 事件循环
      1. 最开始的时候，渲染主线程会进入一个无限循环
      2. 每一次循环会检查消息队列中是否存在任务，如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，进入休眠状态。
      3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。
  5. 消息队列优先级
    1. 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
    2. 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
    3. 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法。
    4. 在目前 chrome 的实现中，至少包含了下面的队列：
      1. 延时队列：用于存放计时器到达后的回调任务，优先级「中」
      2. 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
      3. 微队列：用户存放需要最快执行的任务，优先级「最高」