git-webpack-vite-事件循环

学习内容：

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

总结

1. git

   1. 配置name和email

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

   2. git文件状态

      1. 未跟踪
      2. 已跟踪
      3. 暂存
      4. 未修改
      5. 已修改

   3. 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> 合并分支

   4. GitHub远程仓库常用命令

      1. 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 将代码上传服务器上
         

      2. 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  # 从服务器上拉取代码并自动合并 
         

   5. gitignore

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

2. Webpack

   1. 使用步骤：

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

   2. 配置文件（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"]
                  }
              ]
          }
      }
      

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

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

      2. 配置：

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

      3. 在package.json中设置兼容列表

         "browserslist": [
                 "defaults"
          ]
         

   4. 使用插件（plugin）

      1. 安装插件（html-webpack-plugin）

      2. 配置依赖

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

   5. 开发服务器

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

3. Vite

   1. 基本使用

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

         1. 安装开发依赖vite

         2. vite的源码目录就是项目根目录

         3. 开发命令

            1. vite 启动开发服务器
            2. vite bulid 打包代码
            3. vite preview 预览打包后的代码

         4. 命令构建

            npm create vite@latest
            yarn create vite
            pnpm create vite
            

         5. 配置文件

            import { defineConfig } from "vite"
            import legacy from "@vitejs/plugin-legacy"
            
            export default defineConfig({
                plugins: [
                    legacy({
                        targets: ["defaults"]
                    })
                ]
            })
            

4. 事件循环

   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. 微队列：用户存放需要最快执行的任务，优先级「最高」