Vite 学习笔记

优势

1. vite是vue团队官方出品,vue-cli会在下面两个版本中将vite作为预设构建工具

2. 未来适用vue-cli构建vue项目时要写的vue.config.js不再是webpack的配置而是vite的配置(目前只基于浏览器项目)

3. vite也支持构建react项目,也支持构建angular项目,svelte项目也支持构建

内容

1.什么是构建工具

• 构建工具是运行在服务器的

• 企业级项目里都可能会具备哪些功能

  1. typescript: 若遇到ts文件需要使用tsc将typescript代码转换为js代码

  2. React/vue: 安装react-compiler/vue-complier将我们写的jsx文件或vue文件转换为render函数

  3. less/sass/postcss/component-style: 我们又需要安装less-loader,sass-loader等一系列编译工具

  4. 语法降级: babel ---> 将es的新语法转换旧版本浏览器可以接受的语法

  5. 体积优化: uglifyjs ---> 将我们的代码进行压缩变成体积更小性能更高的文件

  6. ...........

• • 稍微改一点点东西,就很麻烦

    • eg: 将App.tsc ---> App.jsx --->React-complier ---> js文件

打包

• 将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程叫做打包,打包完成以后会给我们一个浏览器可以认识的文件

构建工具的作用

1. 模块化开发支持: 直接从node_modules里引入代码+多种模块化支持

2. 处理代码兼容性: 比如babel语法降级,less,ts语法转换(不是构建工具做的,构建工具讲这些语法对应的处理工具集成进来自动化处理)

3. 提高项目性能: 压缩文件,代码分割

4. 优化开发体验:

   • 构建工具会帮你自动监听文件的变化,当文件变化后自动帮你调用对应的集成工具进行重新打包,然后在浏览器重新运行(整个过程叫做热更新 hot replacement)

   • 开发服务器: 跨域的问题,用react-cli create-react-element vue-cli 解决跨域的问题@

市面上主流的构建工具

1. webpack

2. vite

3. parcel

4. esbuild

5. rollup

6. grunt

7. gulp

2.vite相较于webpack的优势

1. 因为webpack支持多种模块化,一开始必须要统一模块化代码,所以意味着需要将所有的依赖全读一遍(即将commonjs,esmodule全部翻译为webpack标准)

2. vite不会把webpack干翻,vite是基于es modules的(必须使用esmoduls,没有commonjs),侧重点不一样,webpak更多关注兼容性,而vite关注浏览器端开发体验

webpack

vite

vite 深层

vite脚手架和vite区别

• 当运行命令yarn create vite时(脚手架)

  1. 帮我们全局安装一个东西:create-vite(vite脚手架)

  2. 直接运行这个create-vite bin目录下的一个执行配置

• 而create-vite不是vite,create-vite内置了vite,是一个内置vite 的项目模板

• 类似vue-cli 会内置webpack

vite环境变量(服务端配置,建议项目中配置练手)

环境变量:会根据当前的代码环境产生值的变化的变量就叫做环境变量

代码环境:

1. 开发环境

2. 生产环境

   -------小公司↑

3. 测试环境

4. 预发布环境

5. 灰度环境

举个例子: 百度地图sdk

APP_KEY: 测试环境和生产环境还有开发环境是不一样的key

--开发环境:110

--生产环境:111

--测试环境:112

请求第三方sdk接口时需要带上的一个身份信息

............

vite服务器搭建原理

............

vite启动项目初体验

1. 当没有vite时,浏览器可能无法识别import _ from 'lodash' (非绝对路径,相对路径),因为lodash在node_modules里,而浏览器要请求node_modules需要请求很多资源,而commonjs是从服务端搜索文件,不需要请求

2. 而vite在处理的过程中如果看到了有非绝对路径或者相对路径的引用,他则会尝试开启路径补全

   • import _ from "/node_modules/.vite/lodash"

依赖预构建

• 有的包是以commnjs规范的格式导出,不是esmodules.例如axios

• 首先vite会找到对应的依赖,然后调用esbuild(对js语法进行处理的一个库)将其他规范的代码转换成esmodule归还,然后放到当前目录下的node_modules/.vite/deps

• 解决了三个问题:

  1. 不同的第三方包会含有不同的导出格式(这个是vite没法约束人家的事情)

  2. 对路径上的处理可以直接使用.vite/deps,方便路径重写

  3. 叫做网络多包传输的性能问题(也是原生esmodules规范不敢支持node_modules的原因之一)

     多包传输消耗网络资源

关于CSS

vite中对css以及css模块化的简单处理

• 其实就是解决多个同类名解析到一个文件里重名覆盖的问题,通过添加随机值来进行区分就不覆盖了

• 原理:将文件后缀名改为module.css

  1. modules.css(module是一种约定,表示需要开启css模块化)

  2. 他会将你的所有类名进行一定规则的替换(eg将fotter替换成_footer_i22st_1)

  3. 同时创建一个映射对象{footer:"_footer_i22st_1"}

  4. 将替换后的内容塞进style标签里然后放入到head标签中(能够读到index.html的文件内容)

  5. 将commonA.modules.css内容进行全部抹除,替换成JS脚本

  6. 将创建的映射对象在脚本中进行默认导出

vite配置文件中css配置流程(modules篇)

• 在vite.config.js中我们通过css属性去控制整个vite对于css的处理行为

  • localConvention: 修改生成的配置对象的key的展示形式(驼峰还是中划线形式)

  • scopeBehaviour: 配置当前的模块化行为是模块化还是全局化(有hash就是开启了模块化的一个标志,因为它可以保证产生不同的hash来控制我们的样式类名不覆盖)

  • generateScopedName:生成的名字的规则

import { defineConfig } from 'vite'
export default defineConfig({
    optimizeDeps:{
        exclude:[],//将指定数组中的依赖不进行依赖预构建
    },
    envPrefix:"ENV_",
    css:{//对css的行为进行配置
        
    }
})

vite配置文件中css配置流程(preprocessorOptions篇)

vite配置文件中css配置流程(postcss篇)

静态资源

• vite在生产环境对静态资源的处理

• 打包后的静态资源有hash

  • 原因:

    1. 浏览器有缓存机制,静态资源名字只要不该,就会直接用缓存的

    2. 刷新页面:请求的名字是同一个:读取缓存

  • 所以要尽量避免名字一致

• hash算法:将一串字符串经过运算得到一串乱码字符串

• uuid是最独一无二的

vite插件

..............

vite目录

vite.config.js

• 是Vite的和性能配置文件,用于配置vite的各种行为和插件

配置文件语法提示

​

vite.base.config.js

• 无论开发生产环境都要走的配置

import { defineConfig } from 'vite'
export default defineConfig({
    optimizeDeps:{
        exclude:[],//将指定数组中的依赖不进行依赖预构建
    },
    envPrefix:"ENV_",
    css:{//对css的行为进行配置
        
    }
})

package.json

• 用于描述项目的信息，包括项目的名称，版本，依赖，脚本等

---------TS-------------

tsconfig.json

• TypeScript的配置文件，用于配置TypeScript编译器的行为

tsconfig.app.json

• 主要用于定义项目中其他文件的TypeScript编译规则,这个文件的内容通常会被引入到主配置文件tsconfig.json中

tsconfig.node.json

• tsconfig.node.json是用于专门配置vite.config.ts文件的编译规则的文件。该文件的内容最终可能会被引入到主配置文件tsconfig.json中

env.d.ts

• env.d.ts文件在TypeScript中用于声明环境相关的类型定义

• 作用

  • env.d.ts文件允许开发者为项目中的环境变量或全局变量提供类型定义。这对于那些没有直接包含在TypeScript项目中的外部库或环境变量尤为重要。

  • 通过在env.d.ts文件中声明类型，TypeScript编译器可以在编译阶段进行类型检查，提高代码的可读性和可维护性。

vite与ts

vite处理跨域

1. 什么是构建工具

2. webpack的缺点

3. es module的规范

4. vite到底是设么

5. vite基本安装和使用

6. vite编译结果

7. vite编译结果分析

8. vite配置文件

9. vite中处理css,静态资源怎么去做

10. vite的插件以及常用插件的使用

11. vite与ts的结合

12. vite构建react项目,svelte项目,Vue3项目

13. vite构建原理

else

lodash

• 是一个一致性、模块化、高性能的 JavaScript 实用工具库，旨在简化 JavaScript 编程

• 主要用于简化JavaScript编程中的常用任务。它提供了大量的工具函数，用于处理数组、对象、字符串、数字等数据类型，帮助开发者提高编程效率。

• npm install lodash

babel

• Babel是一个JavaScript编译器，主要用于将ECMAScript 2015+（ES6、ES7等）代码转换为向后兼容的JavaScript版本，以便在各种环境中运行。

• 它允许开发者使用最新的JavaScript特性，而无需担心兼容性问题

• Babel是一个开源项目，由社区维护和贡献。其源代码托管在GitHub上，并受到MIT许可证的保护。

CommonJs

• CommonJS使用require函数来导入模块，并通过module.exports或exports对象来导出模块内容

ESModule(ESM)

• ES Module则使用import和export关键字来进行模块的导入和导出。import可以是静态的，也可以是动态的（使用import()函数）

区别

• 在实际开发中，需要根据具体的项目需求和环境来选择使用哪种模块系统。例如，在Node.js环境中，CommonJS是主要的模块系统；而在浏览器环境中，ES Module则更为常见。

• CommonJS主要在Node.js环境中使用，它在浏览器环境中的支持有限。

• ES Module在现代浏览器中得到广泛支持，并且已经成为Web标准的一部分。然而，在一些旧版浏览器中可能无法使用ES Module。

Prettier

• Prettier是一个功能强大、易于使用和配置的代码格式化工具，适用于各种开发场景和团队。通过使用Prettier，可以确保代码风格的统一和一致性，提高代码的可读性和可维护性。