IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> git-webpack-vite-事件循环 -> 正文阅读

[开发工具]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. 微队列:用户存放需要最快执行的任务,优先级「最高」
  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 11:29:10  更:2022-12-25 11:31:29 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年2日历 -2024/2/22 9:55:17-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码