Vite学习指南

news2024/11/15 13:31:20
那本课程都适合哪些人群呢?
想要学习前端工程化,在新项目中投入使用 Vite 构建工具的朋友
Webpack 转战到 Vite 的小伙伴
前端架构师们,可以充实自己的工具箱
当然如果你没有项目相关开发经验,也可以从本课程中受益,让你开阔眼界,将你学到的前端知识融会
贯通,应用到你的实战中。
2.1 什么是 Vite
Vite (法语意为 " 快速的 " ,发音 /vit/
,发音同 "veet" )是一种新型前端构建工具,能够显著提
升前端开发体验。它主要由两部分组成:
一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能 ,如速度快到惊人的 模块热更新
HMR
一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优
化过的静态资源。
Vite 意在提供开箱即用的配置,同时它的 插件 API JavaScript API 带来了高度的可扩展性,并有完整
的类型支持。
首先呢我们来看一下,在 Vite 中如何集成 eslint ,为了使我们的代码具备可预测性,易于浏览并易于理
解,在构建一个大型规模的应用的时候,我们需要在 Vtie 中集成 ESLint 改善咱们开发人员的体验,特别
是与一个团队的合作,我们更需要设置一些自动化的代码提示和格式化。
首先呢,我们来看一看在 Vite 中如何集成 eslint ,返回 vscode ,我们打算在 vite-basiscs-vanilla 这个
项目里边,去使用 eslint ,在没使用之前,我们先来看一下我们这些文件的表现,我们先看一下
main.js ,这个文件很显然好像没有什么问题,包括 main.json.js 也是没有问题的,但事实上呢,我们这
些代码如果在一个团队里边,按着统一的规范的话,可能不规范。
那么接下来呢,我们首先在 vscode 里边去安装一个扩展,点击这个按钮,我们输入一下 eslint ,这样的
话,我们就搜到了关于 eslint 这样的扩展,我们点击安装就好了,这里呢很显然我们已经安装好了,他
的版本是 2.2.2 ,安装好了以后呢,我们回到我们代码里边,很显然这一步还不够,我们得需要去安装
eslint 相关的一些插件。
首先我们在这个目录下面点击右键,在集成终端中打开我们这个目录,我们去安装 eslint 相关的一些插
件,我们执行 pnpm i eslint - config - standard eslint - plugin - import eslint - plugin - promise
eslint - plugin - node eslint - D 稍等就安装好了,这里头有一个 warning 就是他说我们这里边需要依赖
7.12.1 的版本 , 但是我们装的是 8.1.0 版本这个无大碍,所以我们暂时不用去关注他。
那安装完了以后呢,我们现在再看一下 main.json 还是没有任何的反馈。那么接下来我们在当前的目录下
面创建一个新的文件,取名为叫做 .eslintrc.js 我们来去通过 module exports 来做一个配置。在配置里边
儿呢,我们去定义一个 extends 这样的一个属性,它的值呢怎么可以定成 stamdard 的是刚才我们安装好
那个标准的的 eslint 配置好了,现在呢我们看到这个 eslintrc.js 已经有关于语法的问题了。
const modules = import.meta.globEager('./glob/*[1].*')
// console.log(modules)
Object.entries(modules).forEach(([key, value]) => {
console.log(key, value.default)
// value().then(module => {
// console.log(key, module.default)
// })
})// eslintrc.js
module.exports = {
extends: 'standard'
}
那我们看一下 problem ,他告诉我们 string 必须要用一个单引号。很显然我们这个字符串呢用的是双引
号,另外呢他告诉我们新行必须要求我们在这个末尾上添加一下,那很显然,我们需要手工的去做一些
调整。
我们可以把这个给改一下,改完了以后我们看到这个文件就没有任何的关于也是语法的问题了,那接下
来我们再来看一下 main-json.js ,我发现这个文件貌似没有什么问题。
再去打开一个文件,再去打开一个文件,再去打开一个文件,我们看到呢这里头貌似好像都满足了们所
谓的 eslint 的一些语法要求。
那如果我们的代码里面有一些不满足的要求会怎么样呢?
比方说我们再打开一个 glob 下面的 m1.js ,好,我们看到这个代码呢给我们的提示 , 新行要求我们在末尾
需要添加一下 , 很显然我没有添加,那大家想一想,如果我们每一个这样的 js 文件都属工的进行真的修改
一来费时间,二来呢可能我们也改不全,会漏改一些内容。
那怎么办呢?哎,我能不能有个工具来帮助我们来去自动的进行这样的问题的发现并且修改呢?我们可
以采用比方说保存文件以后格式化就帮助我们自动实现了呢。这是可以的,我们得需要借助于另外的一
个工具。这个工具呢就是我们介绍的 prettier ,它可以帮助我们实现这个功能。
这功能的添加我们首先得做几个工作,第一步我们先在 vscode 里面安装一个 prettier 的这样的一个所谓
的扩展。我们属于一个 prettier ,好,发现了,这里头就有一个这样的 prettier 的插件,我们的安装好就
可以了,这里我们已经安装好了,他的版本是 9.3.0
安装好这个插件以后还没有完成彻底的任务,我们得需要在我们项目的根目录下面去做一个 prettier 的一
个配置,我们这里面呢再去创建一个新的文件。这个配置文件我们可以取名为叫做 .prettierrc ,注意,
这是一个类似于 json 的一个文件,我们呢不要在这里面去编写 .js 的语法,我们先写个花括号,然后在里
头呢我们去写一个叫做 semi 也就是所谓的分号。我们要不要加分号呢?我们可以对应为 false ,不让我们
说的语句加分号,第二呢就是我们在后面要加一个所谓的 singleQuote ,也就是我们语法里面的字符串的
双引号要不要加呢?这头我们可以写个 true 。也就是说我们双引号要变成一个单引号
// .prettierrc
{
"semi": false,
"singleQuote": true
}
这就是定义了我们一个的规则。那以后呢我们在检查的时候,可以按照我们这个规则来继续的定义。关
prettier 的其他规则,大家可以参照官网网站去看一下。
配置完了以后呢,那我们来再去看一下 m1.js ,很显然这里头它并没有帮助我们做相关的修改。我们保存
一下文件也没有完成,那怎么办呢?我们还得需要借助于 vscode 的一些功能。
首先呢,我们打开一个配置。在配置里边呢,我们去搜索一下 (format on save) ,我们要把它勾掉,等于
我们在保存这个文件的时候呢去做一些格式化。另外呢,我们还得需要在这后边再去搜索一个叫做
(formatter) ,这里头有一个 default formatter 。我们选择哪一个格式化的工具呢?我们选择这个
prettier 就可以了。好,这个完成了以后,接下来我们打开这个文件按一下 Ctrl+s ,好,发现了它会自动
的帮助我们产生一个新行。以此类推, m2 Ctrl+s 一样的,那么所有的这些文件呢我们都可以看出会帮助
我们做符合 eslint 的这样来一些语法,那 prettier 他会帮助我们完成这个工作。 说到这儿感觉我们的工作呢貌似已经完成了,但事实上如果是我们手工的需要去把每一个文件都进行保
存也是一个问题,我们也会漏保存一些东西。那能不能让 eslint 帮助我们自动的进行检测,看看还有哪些
文件有问题呢?这个也是没有问题的,我们可以在 package.json 里面去配置一个 eslint 的脚本,我们可以
取名 lint 为或者是 eslint 都可以,后面的命令呢就是 eslint --ext 我们要去检查 js 文件,检查哪个目录呢?就
是当前目录下,如果将来我们可以把我们的 js 文件放在 src 这个目录下面,那你就可以写的当前目录下的
src 。目前呢我们没有 src 目录,所以呢我们就检查当前目录下面的 js 文件就好了。
// package.json
{
"name": "vite-basics-vanilla",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --ext js ./"
},
"devDependencies": {
"eslint": "^8.11.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"husky": "^7.0.4",
"vite": "^2.8.0"
}
}
保存一下,然后在我们的终端上面我们清一下屏,执行一下 pnpm run lint ,大家看到还有一个漏改了
worker.js 就是的,这里边告诉我们的错误是,关于空格方面以及关于 postMessage 没有定义方面,那我
们来打开这个 worker 文件,它是在当前我们这个项目的根目录下面我们打开这个 worker.js 我发现了,你
果然有一些问题,我们先去保存一下。保存完了以后呢,我发现还是有很多问题的,希望我们要像 var
const, 第二呢,他希望我们在这个 function 的后面加一个空格儿,另外呢 postMessage 并不是我们当
前这个文件里头具有的一个方法。他应该是一个 window 对象,上面带着一个全局的函数。我们现在呢
可以执行一下保存,发现了这些问题并没有直接的解决。
很想来我们那些配置呢可能不全,现在我们先不着急解决这些问题。留着的这个问题以便于我们后边的
测试,我们先把相关的这些文件都关闭掉。
接下来呢我们来看一下另外一个需求,我们也希望在项目打包之前来发现一些 eslint 错误,如果我们这些
错误不解决,我们不希望我们的项目进行 build 首先呢我们来看一下 package.json ,在这里边儿有一个叫
pnpm run build 的命令,我们可以看行一下。发现呢,这个 build 的工作已经完成了,很显然在 build
之前没有进行 eslint 的检查。我们可以在这面命令的前面加一个 pnpm run lint && 表示的 build 这个命
令,
// package.json
{
"name": "vite-basics-vanilla",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite","build": "pnpm run lint && vite build",
"preview": "vite preview",
"lint": "eslint --ext js ./"
},
"devDependencies": {
"eslint": "^8.11.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"husky": "^7.0.4",
"vite": "^2.8.0"
}
首先先进行对他的检查,然后再进行 build ,保存一下,然后呢我们再去执行一下 pnpm run build
好,我们发现呢这里头有很多问题,这里头有一大堆问题是什么呢?
我们来看是这个编译以后的 js 文件,也就是我们 dist 目录下的文件。这个呢我们暂时不用管它,因为 dist
目录是我们编译后的文件,我们不用检查它的 es 问题。我们只关心我们这个 worker.js 的这个错误。
另外呢,我们也不希望我们的项目在进行代码提交的时候带着我们这些问题提交 , 也就说我们希望在 git
行提交的时候,能够检查出我们的一些 es 问题。当我们把这些问题都解决了以后,再进行代码提交,这
个工作我们该怎么实现呢?
我得需要一个 git husky 这样的一个所谓的 hook 。关于 git hook ,大家可以参照 git 相关的一些文档,或者
是参照一下我的 webpack 相关视频。在那个视频里边儿呢详细的介绍了一下 git hook 的一个使用,我们
就直接的去使用它就好了。
返回我们当前的这个目录,在这个下面呢我们来去执行一个关于 git 一些操作。首先在我们当前的目录下
面呢去初始化一个 git 环境,我们执行一下 git init
那好,这样的话呢,我们初始化的环境就搞定了,接下来我们再 git 上面去做一个远端的仓库。
好,登录我的 git 我们新建一个项目。我们创建一个新的项目,叫做 (felix-courses-vite-vanilla) 。好,接
下来我们其他的内容按照默认点击 (create response) 就可以了,这样话就创建了一个远端的仓库。
我们可以把这句话 copy 下来。好,回到我们的 vscode ,我们把那个代码粘贴过来,好,这样的话没有任
何反应,表示我们这个远端仓库已经创建好了。好了,接下来呢我们执行一下 git status 。看到我们有很
多的文件需要提交,我们执行一下 git add. ,提交完了以后呢我们执行一下 git commit - m 'vite
init' 。好,这样的话呢,我们就已经提交成功了,打开 .gitignore 。我们看到这里有定义了很多文
件不需要我们提到服务器上的,比方说这个 dist, 但这个文件呢并不能够帮助我们拦截代码里的问题。那
怎么办呢?
我们得需要去做一个所谓的 git husky ,我们需要去安装一下。执行一下 pnpm i husky husky 是一个非
常好用的一个好用的工具。好,安装完了以后呢,我们执行一下 npx husky install 。我们安装一下
husky ,安装完了以后呢,大家看到这里有提示说 git hooks installed
这是我们的这个钩子已经安装好了,那现在呢我们来看一下 .husky 下面呢就有一个所谓的叫做
husky.sh 。那接下来呢我们开始准备去编写一个 hook ,也就是在 git 提交之前去执行的一个命令。 那这里呢?我们执行一下 pnpm husky add. husky /pre - commit pre-commit 就是我们在提交之前的
一个 hook ,后边我们去输入一个命令叫什么 pnpm run lint 回车。大家看到现在呢在我们的目录下面会
产生一个新的目录叫做 pre-commit, 这里呢就有一个 pnpm run lint ,也就是在 git 提交之前执行一下我们
lint 的检查。
好,那接下来呢我们执行一个 git commit - m 'add husky' 。好,回车。好,大家看到他先去执行了
一下 lint 发现很多问题,那我们可以把这个问题解决了以后再进行所谓 git 的提交。
这里呢为了不让他检查我们 dist 目录里面的问题,我们暂时把 dist 目录给删除掉。其实上呢大家也可以把
我们这些 js 文件放到 src 的目录下面,我们只需要去检查当前目录下 src 的就可以了。暂时呢我们就临时的
dist 目录给删除掉。保存一下,那接下来我们来去看一下重新的检查,我们再去进行一次这个提交。
大家看一下,只剩下这三个问题了。那我们就去改这个问题,我们把这个关闭掉打开 worker.js 。第一个
呢是个 warning ,他希望我们不要 var 使用来用 let const 来代替。那很显然,我们得需要去改成 let ,因为
下面我们对 i 还做了一个操作。 let 以后第一个问题就没有了,接着我们看第二个问题说我们丢了一个空格
在我们的 function 这个名字在后面,那我们可以在在后面加个空格,如果说我们就希望他不需要这个空
格的话,那我们也可以做个配置,后边这个配置的语法呢我们可以把它 copy 一下。到我们 eslintrc 这个目
录下面我们去定义一个叫做 rules 的规则。在这里边儿呢,我们可以我们刚才那个过来,后面我们可以定
义成字符串 off 。表示我们要关闭掉它。那很显然下面呢这里头还有其他的问题,一会儿我们再来看这个
问题,
// .eslintrc.js
module.exports = {
extends: 'standard',
rules: {
'space-before-function-paren': 'off'
},
}
那接下来呢我们到 worker.js 的里头看到这个问题果然不存在了。
接着还有一个问题就是 postMessage 没有发现,因为它是挂载到这个对象上面的。所以呢我们还得需要
去做深度的配置, postMessage 这个呢是一个未定义的问题。我们可以来看一下这个 not-undef 我们可
copy 一下到我们的 eslint 里头再去加一个规则叫 no-undef 变为 off
// .eslintrc.js
module.exports = {
extends: 'standard',
rules: {
'space-before-function-paren': 'off',
'no-undef': 'off'
},
}
保存一下,好,我发现了这回这个问题就不存在了,我们再次编译一下。好,我们看到这里还有两个新
的问题,是 eslintrc 的问题我们打开 eslintrc ,我们看到我们保存一下。发现了 prettier 已经不能够帮助我
们解决这个问题了,我们再来看一下他的问题是什么?就是这个所谓的 comma-dargle 我们可以放在我
们这里头进行一个配置,我们可以在这后边呢去写一个 comma-dargle 那它的规则我们可以去配一下,
或者直接写个 off 保存一下,好,我们看到了这里头这个提示就不存在了,我们再次执行一下。好,大家看到现在呢我们
这个提交就已经可以了,但是呢他告诉我们有几个内容还没有加进来,那我们可以执行一下 git add. ,
git commit - m 'test husky'
我发现在我们就成功的提交到我们远端的仓库里了。
好,至此呢我们就学会了如何在 Vite 中使用 eslint 以及如何使用 prettier 这个工具,在我们代码保存的时
候呢能够帮助我们自动的修正问题,并且呢我们还可以通过 git husky 这个 hook 工具来进行代码提交之
前的一个 eslint 检查。
好,这一招我们就讲到这里,大家加油!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1414633.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

你应该知道的GNU C语句表达式

许多写C语言的同道们或许都知道C语言中的表达式和语句,一般常见的语句都是在表达式后跟分号做结尾。例如, a 10 /*赋值表达式*/a 10; /*赋值语句*/当然语句不止有这一种,暂不过多引入。 我们都知道有些表达式是有其值的,例如上…

查询redis路径,清除redis缓存

查询redis路径 1、执行ps -ef | grep redis 命令,结果如下(记住PID) 2、执行ps -u 系统用户名,进一步确定进程id, 我这里的系统用户名是root,执行ps -u root,结果如下: 结合1的操作结果图可知…

taro3 + vue3 + ts 跨平台体验记录

taro3 vue3 ts 跨平台体验记录,根据进度不定期更新。 目标平台包含:H5、微信小程序、APP。开发环境:windows 安装cli【官方安装文档】 npm install -g tarojs/cli常用命令 // 查看taro版本 npm info tarojs/cli创建demo项目 taro init…

个体诊所电子处方系统设计,社区门诊处方开单管理系统软件教程

个体诊所电子处方系统设计,社区门诊处方开单管理系统软件教程 一、前言 以下软件程序操作教程以 佳易王诊所电子处方管理系统软件V17.3为例说明 如图,在基本信息设置里,可以设置处方配方模板,这样在开电子处方的时候可以一键导入…

C++中map和set的使用

(图片来源于网络) 🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻强烈推荐优质专栏: 🍔🍟🌯C的世界(持续更新中) 🐻推荐专栏1: 🍔🍟🌯C语言初阶…

插槽(64-67)

文章目录 插槽1.插槽 - 默认插槽(组件内可以定制一处结构)2.插槽 - 后备内容(默认值)3.插槽 - 具名插槽(组件内可以定制多处结构)4.作用域插槽(插槽的一个传参语法) 插槽 插槽分类:默认插槽和具名插槽 1.插槽 - 默认插槽(组件内可以定制一处结构) 作用…

JavaEE-微服务-Vuex

Vuex 2.1 什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 Vuex在组件之间共享数据。 2.2 使用 vue cli 构建项目 2.3 入门案例 2.3.1 定义数据 export default new Vuex.Store({state: { // 状态区域(定义变量区域)user: ,toke…

table用position: sticky固定多层表头,滑动滚动条border边框透明解决方法

问题:我们发现,只要设置了border边框,这个位置滑动有内容经过就会出现如图的情况。 解决的方法:用outline(轮廓)替代border,以达到我们想要的样式。 table thead tr {border: none;outline-color: #fff;ou…

[SWPUCTF 2018]SimplePHP1

打开环境 有查看文件跟上传文件,查看文件里面显示没有文件url貌似可以文件读取 上传文件里面可以上传文件。 先看一下可不可以文件读取 /etc/passwd不能读取,源码提示flag在f1ag.php 看看能不能读取当前的文件, 先把代码摘下来 file.php …

Ubuntu 22.04 apt 安装 ros1 ros Noetic Ninjemys

众所周知 ros2还有很多功能没有移植,而ros1官方不再支持 ubuntu 20.04 之后的版本。另一方面Ubuntu 22.04 更新了很多对新硬件的驱动,有更好的兼容性和体验,这就变的很纠结。 如果想在 22.04 使用最新版本的 ros noetic 只有自己编译一个办法…

盘古信息IMS OS 数垒制造操作系统+ 产品及生态部正式营运

启新址吉祥如意,登高楼再谱新篇。2024年1月22日,广东盘古信息科技股份有限公司新办公楼层正式投入使用并举行了揭牌仪式,以崭新的面貌、奋进的姿态开启全新篇章。 盘古信息总部位于东莞市南信产业园,现根据公司战略发展需求、赋能…

java金额数字转中文

java金额数字转中文 运行结果: 会进行金额的四舍五入。 工具类源代码: /*** 金额数字转为中文*/ public class NumberToCN {/*** 汉语中数字大写*/private static final String[] CN_UPPER_NUMBER {"零", "壹", "贰",…

机器学习第一个项目-----鸢尾花数据集加载及报错解决

项目步骤 如刚开始做,从 “项目开始” 看; 如遇到问题从 “问题” 开始看; 问题 报错如下 ModuleNotFoundError: No module named sklearn解决过程 查看官网,感觉可能是python版本和skilearn版本不匹配,更新一下p…

Django模型(一)

一、介绍 模型,就是python中的类对应数据库中的表 1.1、ORM ORM 就是通过实例对象的语法,完成关系型数据库的操作的技术,是"对象-关系映射"(Object/Relational Mapping) 的缩写 ORM 把数据库映射成对象 1.2、示例 1.2.1、模型 from django.db import models…

逻辑推理,形式逻辑:且关系,或关系,前加非后不变,箭头和或的转化

国考省考行测:逻辑推理,形式逻辑:且关系考点 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能,附带行测和申论,而常规国考省考最重要的还是申论和行测,所以大家认真准备吧&#xf…

旷视low-level系列(一):Bayer Pattern Unification and Bayer Preserving Au

文章目录 1. Motivation2. Contribution3. Methods3.1 BayerUnify3.2 BayerAug 4. CommentsReference 1. Motivation 对于RAW域去噪,通常会将单通道bayer格式的RAW图打包成4通道,然后送入神经网络。不同厂家生产的sensor出的RAW图可能具有不同的bayer模…

互联网加竞赛 基于深度学习的人脸专注度检测计算系统 - opencv python cnn

文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 基于深度学习的人脸专注度…

力扣hot100 岛屿数量 dfs 图论

Problem: 200. 岛屿数量 文章目录 思路复杂度Code 思路 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Code class Solution {int n, m;public int numIslands(char[][] grid){n grid.length;if (n 0)return 0;m grid[0].length;int ans 0;…

使用make_grid多批次显示网格图像(使用CIFAR数据集介绍)

背景介绍 在机器学习的训练数据集中,我们经常使用多批次的训练来实现更好的训练效果,具体到cv领域,我们的训练数据集通常是[B,C,W,H]格式,其中,B是每个训练批次的大小,C是图片的通道数,如果是1…

告别无法访问的Github

告别无法访问的Github 最近在使用github的时候又登不上去了,挂着VPN都没用 但是自己很多项目都存在github,登不上去那不得损失很大 所以一行必须整点儿特殊手段来访问,顺便分享一下 1.加速器 网上很多解决方案都是在分享各种加速器来登陆…