主流构建工具1.3

typescript使用tsc工具将ts代码转换为js代码React/Vue安装react-compiler/vue-compiler将我们写的jsx文件或者.vue文件转换为render函数less/sass/postcss/component-style我们有需要安装less-loader,sass-loader等一系列编译工具转换为css代码语法降级babel可以将es的新语法转换旧版浏览器可以接受的语法体积优化uglifyjs可以将我们的代码进行压缩变成体积更小性能更高的文件。

以上稍微改一点就会很麻烦所以我们希望有一个构建工具可以将以上工具全部集成到一起实现上述功能我们只需要关注我们写的代码即可。

即构建工具可以帮我们自动去tscreact-comilerlessbabeluglifyjs全部走一遍让我们不用每次关心我们的代码在浏览器运行。

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

多种模块化支持处理代码兼容性比如babel语法降级lessts语法转换不是构建工具做的构建工具将这些语法对应的处理工具集成进来自动化处理提高项目性能压缩文件代码分割优化开发体验

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

replacement开发服务器跨域的问题用react-cli

create-react-element

我们只需要首次给构建工具提供一个配置文件这个配置文件也不是必须的没有它也会默认处理有了集成的配置文件以后我们就可以在下次需要更新的时候调用一次对应的命令即可如果再结合热更新我们就更加不需要管任何东西这就是构建工具去做的事情它让我们不用关心生产的带啊吗也不用关心代码如何在浏览器运行只需要关心我们的开发怎么写的爽怎么写就好了。

1.2

webpackviteparcelesbuildrollupgruntgulp

1.3

开发的工具就会开始遇到性能瓶颈通常需要很长时间甚至是几分钟才能启动开发服务器即使使用模块热替换HMR文件修改后的效果也需要几秒钟才能在浏览器中反映出来。

如此循环往复迟钝的反馈会极大地影响开发者的开发效率和幸福感。

起因我们的项目越大构建工具webpack所要处理的js代码就越多【跟webpack的一个构建过程工作流程有关】

yarn

startwebpack不能改如果要改则会动到webpack的大动脉。

这段代码最终回到浏览器里去运行

webpack_require(vue);webpack的编译原理AST抽象语法分析的工具分析出js文件有哪些导入导出操作

(function(modules)

通过webpack的配置文件得来的webpack.config.js

./src/index.jsmodules[entry](webpack_require);

({index.js:

}))因为webpack支持模块化它一开始就必须要统一模块化代码所以意味着它需要将所有的依赖读一遍。

modules的侧重点不一样webpack更多的关注兼容性而vite关注浏览器端的开发体验。

vite启动项目初体验

vite官网搭建vite项目文档教程https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

create

帮我们全局安装了一个东西create-vitevite的脚手架直接运行这个create-vite

我们之前接触过vue-clicreate-vite和vite的关系是create-vite内置了vite。

使用vue-cli会内置webpack

create

我们自己搭建一个项目下载vitevuepost-csslesslabel

vue-cli/create-vite给了一套精装修的模板什么都下好了并且给你做了最佳实践的配置

2.2

box不需要做任何额外的配置就可以使用vite来帮你处理构建工作

在默认情况下我们的esmodule去导入资源的时候要么是绝对路径要么是相对路径既然我们现在的最佳实践是node_modules那么为什么es官方在我们导入非绝对路径和非相对路径的资源的时候不默认帮我们搜寻node_modules

浏览器环境中的安全性原因是一个主要考虑因素。

如果浏览器默认搜索node_modules可能需要进行额外的文件系统操作和路径解析增加了加载模块的时间和资源消耗。

2.3

/node_modules/.vite/deps/loadsh.js?vebe57916;在处理的过程中如果说看到了有非绝对路径或者相对路径的引用则会尝试开启路径补全

../

vite会全权交给一个叫做rollup的库去完成生产环境的打包

----

依赖预构建首先vite会找到对应的依赖然后调用esbuild对js语法进行处理的一个库将其他规范的代码转换成esmodule规范然后放到当前目录下的node_modules/.vite/deps同时对esmodule规范的各个模块进行统一集成

不同的第三方包会有不同的导出格式这个是vite没法约束人家的事情对路径的处理上可以直接使用.vite/deps方便路径重写叫做网络多包传输的性能问题也是原生esmodule规范不敢支持node_modules的原因之一有了依赖预构建以后无论它有多少的额外的export和importvite都会尽可能的将他们集成最后只生成一个或者几个模块

vite.config.js

如果你使用的是webstorm那你可以得到很好的语法补全如果你使用的是vscode或者其他编辑器则需要做一些特殊处理

过去我们使用webpack的时候我们需要区分配置文件的一个环境

webpack.dev.configwebpack.prod.configwebpack.base.configwebpackmerge

2.5

开发环境开发环境是开发人员进行软件开发和调试的地方。

在开发环境中开发人员可以进行代码编写、调试、测试和验证。

这个环境通常是本地的开发机器开发人员可以通过使用

Vite

replacement功能以便更快地进行开发和调试。

测试环境测试环境是用于进行软件测试的环境。

在测试环境中开发人员和测试人员可以对软件进行不同类型的测试例如单元测试、集成测试和端到端测试。

在测试环境中可以使用

Vite

构建工具生成测试所需的构建文件并在模拟的环境中进行测试。

预发布环境预发布环境是在软件发布之前进行最后测试和验证的环境。

在预发布环境中可以对软件进行更全面的测试以确保它符合发布的质量标准。

这个环境通常是一个类似于生产环境的环境但在实际发布之前可能会使用一些模拟数据和模拟系统进行测试。

灰度环境灰度环境是在软件发布后逐步向用户群体推出新功能或更新的环境。

在灰度环境中新的软件版本或功能将部署到一小部分用户中以便测试其稳定性和兼容性。

这个环境类似于生产环境但只有一部分用户能够访问新的功能或更新。

生产环境生产环境是最终向用户提供服务的环境。

在生产环境中已经通过了开发、测试、预发布和灰度环境的验证并且已准备好为最终用户提供稳定、可靠的服务。

在生产环境中通常会使用

Vite

构建工具生成用于部署的生产级别的构建文件并进行必要的优化和压缩以提供最佳的性能和用户体验。

我们在和后端同学对接的时候前端在开发环境中请求的后端API地址和生产环境请求的后端API地址是一个吗肯定不是一个

开发和测试http://test.api/生产https://api/

vite内置了dotenv这个第三方库会自动读取.env文件并解析这个文件中的对应的环境变量并将其注入到process对象下但是vite考虑到和其他配置的一些冲突问题它不会直接注入到process对象下

vite给我们提供了一些补偿措施我们可以调用vite的loadEnv来手动确认env文件

porcess.cwd方法返回node进程的工作去取对应配置文件并进行解析并放进一个对象

const

...modeEnvConfig}如果是客户端vite会将对应的环境变量注入到import.meta.env里去

vite做了一个拦截为了防止我们将隐私性的变量直接送到import.meta.env中所以做了一层拦截如果你的环境变量不是以VITE开头的他就不会帮你注入到客户端中去如果我们想要更改这个前缀可以去使用envPrefix配置。

vite

是一个现代化的前端构建工具它使用了一种名为单文件组件Single

File

文件的模板、样式和脚本部分分别提取出来并将它们转换为浏览器可以理解的代码。

具体地说Vite

文件的内容提取出其中的模板、样式和脚本并将它们转化为独立的代码块。

然后Vite

script

文件中的模板、样式和脚本部分分别作为独立的模块加载到浏览器中并在浏览器中动态组合它们构建出最终的组件。

3.2

方法可以接受多个参数将它们解析为一个绝对路径。

这意味着你可以使用相对路径作为参数并将其解析为相对于当前工作目录的绝对路径。

这对于确定准确的文件路径非常有用。

解决跨平台路径问题在不同的操作系统中对于路径分隔符和路径表示法有所差异。

使用

path.resolve

方法可以确保生成的路径在不同的操作系统下都是有效的因为它会自动根据当前操作系统调整路径分隔符和表示法。

处理路径拼接和规范化path.resolve

方法会将传入的路径片段进行拼接并返回一个规范化的路径。

这意味着它会解析和处理路径中的

..、.

等相对路径符号确保生成的路径是规范化的、干净的路径。

确保路径的存在性使用

path.resolve

方法生成的路径是确保存在的它不会检查路径是否有效或文件是否存在但会确保路径的格式正确。

这可以帮助你在操作文件系统时提供正确的路径避免出现错误或异常。

vite与css

vite在读取到main.js文件中引用到了index.css直接使用fs模块去读取index.css中文件内容直接创建一个style标签将index.css中文件内容直接copy到style标签里将style标签插入到index.html的head中将css文件中的内容直接替换为js脚本方便热更新或者css模块化同时设置Content-Type为js从而让浏览器以JS脚本的形式来执行该css后缀的文件

但你取了footer这个名字别人因为没有看过你这个组件的源代码也可能去取名footer这个类名最后可能会导致样式被覆盖因为类名重复这就是我们在协同开发很容易出现的问题

module.cssmodule是一种约定表示需要开启css模块化他会将你的所有类名进行一定规则的替换将footer替换为_footer_i22st_1同时创建一个映射对象{

footer:

_footer_i22st_1}将替换过后的内容塞进style标签里然后放入到head标签中能够读到index.html的文件内容将componentA.module.css内容全部抹除替换为JS脚本将创建的映射对象在脚本中默认导出

4.2

是层叠样式表的标准文件格式它使用类似于选择器和属性的语法来描述网页的样式。

CSS

是前端开发中最常见的样式表语言浏览器原生支持。

LESS.lessLESS

CSS

文件然后在浏览器中加载。

SCSS/SASS.scss/.sassSCSSSassy

CSS和

子选择器。

通过嵌套定义我们可以更直观地表示这些选择器之间的层次结构。

此外嵌套定义还可以减少重复代码的编写。

在上述示例中.header

.footer

具有相同的背景颜色、文字颜色和内边距通过嵌套定义我们只需在父选择器中指定一次即可避免了重复的样式声明。

另外嵌套定义还可以方便地应用伪类和伪元素样式。

在示例中嵌套定义了

:hover

通过使用嵌套定义我们可以更清晰地组织和维护样式代码减少了冗余和重复的工作提高了代码的可读性和可维护性。

4.3

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

4.3.1

是对css模块化的默认行为进行覆盖localsConvention:

camelCase,

配置当前的模块化行为为全局化generateScopedName:

[name]__[local]___[hash:base64:5],

my-app,

}localsConvention修改生成的配置对象的key的展示形式驼峰还是中划线形式scopeBehaviour配置当前的模块化行为是模块化还是全局化有hash就是开启了模块化的一个标志因为它可以保证产生不同的hash值来控制我们的样式类名不被覆盖generateScopedName[name_[local]_[hash:5]]指定生成的类名的命名规则可以配置为函数也可以配置成字符串规则hashPrefix生成的hash会根据你的类名进行生成如果想要你生成的hash更加的独特一点你可以配置hashPrefix你配置的这个字符串会参与到最终的hash生成globalModulePaths代表你不想参与到css模块化的路径

4.3.2

静态资源是指不需要经过构建处理的文件例如图片、视频、字体等除了动态API以外百分之九十九的资源都被视作静态资源

public

文件夹中这是一个预定义的静态资源文件夹。

当你在代码中引用这些静态资源时Vite

public

中你可以使用相对于根目录的绝对路径来引用静态资源而无需考虑模块化的路径解析。

这是因为

Vite

会对导入的静态资源进行优化和压缩以减小文件大小并提升加载性能。

这包括但不限于压缩图片、压缩和合并

CSS

会为处理后的静态资源生成带有指纹的文件名。

这意味着每个文件都会有一个唯一的哈希值作为文件名的一部分例如

logo.8e4c5f7b.png。

当文件内容发生变化时哈希值也会发生变化从而确保客户端能够正确地缓存和更新静态资源。

输出静态资源

处理后的静态资源会被输出到构建中的正确文件。

这样在生产环境中你可以直接使用相对于构建目录的路径来引用静态资源而无需关心开发环境中的模块解析和路径处理。

5.3

vite会在生命周期的不同阶段中调用不同的插件以达到不同的目的

生命周期vite从开始执行到执行结束

模版能力多页应用支持支持自定义entry支持自定义template

安装yarn

/head在vite.config.js中配置该方法可以根据需要引入需要的功能

import

[vue(),createHtmlPlugin({minify:

true,/***

缺陷没法做海量数据测试没法获得一些标准数据没法去感知http的异常

mockjs模拟海量数据的vite-plugin-mock的依赖项是mockjs

yarn

-D使用方法https://github.com/vbenjs/vite-plugin-mock

5.3.4

缺陷没法做海量数据测试没法获得一些标准数据没法去感知http的异常

mockjs模拟海量数据的vite-plugin-mock的依赖项是mockjs

yarn

-D使用方法https://github.com/vbenjs/vite-plugin-mock

5.3.4