wordpress for sae图床,济南网站搜索优化,盘锦做网站价格,运城公司网站建设那本课程都适合哪些人群呢#xff1f; 想要学习前端工程化#xff0c;在新项目中投入使用 Vite 构建工具的朋友 Webpack 转战到 Vite 的小伙伴 前端架构师们#xff0c;可以充实自己的工具箱 当然如果你没有项目相关开发经验#xff0c;也可以从本课程中受益#xff0… 那本课程都适合哪些人群呢 想要学习前端工程化在新项目中投入使用 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 就可以了。好这个完成了以后接下来我们打开这个文件按一下 Ctrls 好发现了它会自动 的帮助我们产生一个新行。以此类推 m2 Ctrls 一样的那么所有的这些文件呢我们都可以看出会帮助 我们做符合 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 检查。 好这一招我们就讲到这里大家加油
