网站开发课设个人总结,长沙seo网站推广,北京互联网公司招聘信息,网站的ftp账号和密码是什么天下苦webpack久矣#xff0c;相信作为前端开发者一定经历过在项目迭代时间较长的时候经历漫长等待的这一过程#xff0c;每一次保存都会浪费掉大量时间#xff0c;这是webpack这种机制所带来的问题。
于是#xff0c;尤大为我们带来了新一代前端构建工具#xff1a;vite…天下苦webpack久矣相信作为前端开发者一定经历过在项目迭代时间较长的时候经历漫长等待的这一过程每一次保存都会浪费掉大量时间这是webpack这种机制所带来的问题。
于是尤大为我们带来了新一代前端构建工具vite。
说起这个工具相信各位也不会陌生了因为vite已经出现很久时间了现在已经出现了v4版本查看其git仓库发现其迭代变更速度很快也侧面说明了这一工具在前端圈的火热其突出的特点就是快快在什么地方呢就是我们的开发阶段使用vite构建的项目在开发阶段可以为我们节约大量时间但是对于我们没有接触过这一技术栈的同学存在一个比较尴尬的问题。
目前vite主要默认是支持给vue3使用的并且如果使用官方的cli创建的项目一样会默认使用vue3去构建项目此时对于一些vue2的老项目就显得不友好了那么我们如何针对于vue2
的项目进行构建工具的升级呢在将webpack升级到vite的过程中你会遇到哪些坑呢让我来带你跨过去吧在此之前我们去简单了解下什么是vite有什么优势。
什么是Vite Vite下一代的前端工具链 官方只有这么一句话我们就可以明确其是一个前端工具链其出现的时间已经很久了到现在的v4版本已经经历了很多变动在我升级公司的项目的时候还是v3没想到只是过了一个周末打开官网已经到v4了这迭代速度是蒸滴快啊。
这么长的时间其实众多同学都知道其是一个打包构建工具我们就不过多废话直接进入进入主题我们先了解这几个点
Vite为什么之前不出来
在浏览器支持 ES 模块之前JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件这就是webpack这类工具的工作原理他们需要通过解析目录树拿到所有资源文件然后转化为浏览器可以识别的文件才能最终输出供浏览器使用这个过程所需要的时候不论是在初期编译阶段还是修改文件的热更新阶段都不可避免当开发的项目越来越大的时候所需要的编译时间也就越来越长了我们也就遇到了性能瓶颈往往单单启动项目就需要花费很多的时间甚至是数分钟。 Vite 旨在利用生态系统中的新进展解决上述问题浏览器开始原生支持 ES 模块且越来越多 JavaScript 工具使用编译型语言编写。 也正是因为浏览器原生支持了es模块才让vite这类工具得以出现。
什么是Es模块
所以我们也顺带了解下什么是es模块浏览器原生支持了对前端有什么影响有何用处呢
其实我们所说的es模块就是我们常说的ESMESM是一种规范在早期我们的浏览器只支持script标签引入这样的使用方式在很多场景下就会显得很麻烦在NodeJs出来之时携带了CommonJS规范也就是我们所说的CJS规范但是其只适用于服务端所以为了迎合客户端的需求主要是针对浏览器便有了针对于客户端的规范Asynchronous Module Definition简称AMD规范的出现但是这些规范出现的仓促并且也只是为了解决当时的一小部分问题这些社区提出的规范终究只是为了解决一时的需求随着历史的发展新的模块化规范不断涌入、消亡。
直到ESM规范被提出。ESM规范是ES标准的模块化规范他的早期讨论可以追溯到2019年。到此为了ESM的出现自身有诸多的优点这里就不概述了有兴趣的朋友可以自己去查阅我们在此只需要了解这些规范出现的原因和历史背景即可ESM虽然好但是由于CJS规范已经存在较长时间了所以市面上已经有了非常多的CJS规范的包让这些所有包从CJS切换到ESM显然不太现实于是便出现了这样的场景ESM与CJS共存并且这将是一个长期趋势。
如何解决这一痛点
1.两种规范的不同我们很好理解简单来讲我们目前开发的项目有的属于nodejs项目有的属于前端项目两边的包的规范明显不同但是有的工具的包很明显我们都可以用那么我们一般如何去做呢比如在babel中使用babel-plugin-transform-commonjs可以将CJS规范的代码转换为ESM规范在vite或者webpack中都有不同的工具可以转换一般这一任务都会交给这些工具。所以日常开发中开发者对这些规范的感知并不明显。 2.第二种为了一刀切解决当前ESM、CJS、浏览器script标签导入这3种规范互相不兼容的情况提出了兼容三者格式的UMDUniversal Module Definition规范在使用打包工具打包类库的时候往往会有一个打包类型的选项很多包都会选择UMD就是这个原因。
但是很显然这些方式是一定存在痛点的虽然看起来将不同规范在工具集上进行了抹平差异但是由于一些兼容性的问题这些差异就会被放大所以当多个工具出现在一个项目的时候实际是就是为了抹平这些差异化的存在。
上面的这些规范是一些题外话了和本文关系不大但是值得每一位前端开发去了解正是因为ESM规范的优秀才使得浏览器会去原生支持他当然对于这些规范一般都是先定义后实现这个定义在前期已经被定义了只是浏览器的支持是慢慢跟上的总而言之在现在我们已经可以去使用这一特性了。
浏览器原生支持ESM有什么用
这里的东西也相对较多我们就长话短说在之前我们都是通过script标签进行引入的。
这个标签引入的脚本负责交互。
但是一个大型的项目当然不仅仅只有一个js文件对于繁多的文件我们想要很好的管理就显得有些难度于是我们借助webpack这类工具其将我们的文件打包为bundle.js再将文件。这意味着我们的前端开发工作流从“石器时代”跨越到了“工业时代”但是对浏览器来说并没有质的改变它所加载的代码依然一个 bundle.js 整体引入到我们的项目当中。
但是随着浏览器对 ES Module 标准的原生支持改变了这种情况。目前大多数浏览器已经支持通过 script typemodule 的方式加载标准的 ES 模块。这也就意味着类似我们之前在webpack当中的这些引入不需要再进行打包编译了浏览器可以原生去支持去通过module引入而一旦浏览器帮我们做了这些事我们就可以省掉这最耗时的打包编译阶段了。
当然这里的总结还不是很全面但是我们需要了解到其这些最为直观鲜明的优势在了解完这些特性之后我们直接进入进入今天的主题。
使用vite来构建你的Vue2项目
目前许许多多的文章都是支持vue3的包括官方也是默认支持vue3版本但是实际情况来看很多公司并不会过早的将vue版本从2切换到3我们公司就是这样所以想要使用vite去开发vue2的项目就需要去解决很多兼容问题碰巧本人需要去重构一个vue2的项目所以就直接使用上了vitevue2的组合在实际使用下来来看我觉得目前vite已经完全是可以支持vue2的使用了在此期间也踩了很多坑把这些经验分享给大家让大家少走弯路。
webpack升级vite项目搭建指南
单纯的升级会由于不同的项目区分让人迷惑我们直接从零开始去构建一个项目方便大小理解以及切换自己项目的时候更加轻松。
目前官方默认的脚手架工具创建的项目都是默认vue3的版本所以如果想要自己去创建项目要么自己使用vue-cli搭建完项目之后修改要么就直接自己从0开始这里我们直接使用后者我们开始来搭建一个项目
1.直接使用npm初始化一个项目mkdir vue2vitenpm init-y 2.我们需要一个入口文件和一个模板创建两个文件touch main.jstouch index.html 3.这个index.html文件类似webpack的模板文件我们需要手动引入我们的main.js文件并且需要注意的是我们需要对script声明typemodule!DOCTYPE htmlhtml langen head meta charsetUTF-8 / link relicon typeimage/svgxml href/favicon.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titlevue2vite/title /head body div idapp/div script typemodule src./main.js/script /body/html 4.此时我们需要下载我们的工具vite因为我在使用的时候还是v3版本此时已经更新到v4了这里我还是用v3来演示大家使用时请注意版本。pnpm add vite3.2.3 -D 5.下载完成之后就去package.json中加上三个脚本命令这些步骤可以看官网都是些基础步骤就不过多讲解了scripts: { dev: vite, build: vite build, preview: vite preview }, 6.此时我们执行npm run dev就会默认启动一个端口为5173的服务了此时我们就像是使用webpack一样没有任何区别同时修改index.html也会同步刷新。简单的一个项目就启动了。7.此时这一串内容都应该是关于vue基础项目搭建的大概分为这几步下载vue依赖创建app.vue在main.js入口文件注册引入app.vue并且挂载到**#app**节点上。import Vue from vue;import App from ./App.vue; new Vue({ render: h h(App) }).$mount(‘#app’);
8. 完成这几步我们启动项目此时就会出现错误告诉我们没办法识别**vue**文件当然这很合理类似**webpack**一样很多文件都需要用**loader**去翻译所以在这里也是同理我们需要使用一个插件**vite-plugin-vue2**这是一个专门针对**vue2**项目的插件如何使用呢我们知道**vue**的配置文件是**vue.config,js**,**vite**也是类似我们创建一个**vite.config.js**并且引入插件并注册他这里的使用api可以参考官网非常简单不做特殊说明,在配置完插件之后再启动会报错Cannot find module vue-template-compiler编译器错误我们需要下载和**vue**版本匹配的编译器可以在**npmjs**上查看匹配版本我这里的**vue版本是2.6.11**对应的版本就是**vue-template-compiler2.6.11**shell
pnpm add vite-plugin-vue2 -D
pnpm add vue-template-compiler2.6.11 -D import { defineConfig } from vite;
import { createVuePlugin } from vite-plugin-vue2;export default () {return defineConfig({plugins: [createVuePlugin()], })
} 关于vue的部分就省略了因为和webpack去构建vue是没有任何区别的着重想分享给大家的是在使用过程中我们会遇到的这些问题以及如何去处理它如果你有疑问可以在评论区留言。 通过如上操作我们就可以通过vite启动一个没有任何额外配置的简单vue项目了。
webpack升级vite踩坑指南
如果你已经构建好了一个由vite驱动的vue2的项目如果你没有添加任何全家桶相信你也不会有什么问题因为基础的项目vite的默认支持已经足够了但是如果你照搬老项目过来你就会源源不断的出现新问题了在下面我为你总结了这些错误如果你有更多的错误欢迎留言。
在学习错误之前请保证你已经经过了上述的配置我们来开始进行接下来的升级指南吧。
常见错误处理
全局变量获取错误 在 升级为vite之后我们的环境变量用process.env是获取不到的我们需要在vite.config.js中添加下面这项配置define: {process.env: {}}, #### 环境变量命名规范 我们在vue-cli中对于环境的区分是通过env.xxx来区分环境在vite中也是一样不同的是变量命名需要由前者的VUE_APP改变为VITE_APP这里是一些小小的命名规范可全局替换不是什么大问题。
require引入错误 由于webpack是cjs规范所以很多场景我们可以使用require这种语法去加载但是我们在vite中是esm规范所以这个语法就会报错如果想要使用这种语法我们需要使用一个插件这里面会有很多插件我们选择一个vite-plugin-require在开始的时候我尝试过一个插件是vite-plugin-require-transform,后面发现打包非常多错误暂时没有去查看具体原因这里建议不要使用或者有错误的时候可以考虑避开这个插件。import vitePluginRequire from vite-plugin-require;plugins: [vitePluginRequire()], #### 代理配置问题 在webpack中我们一般很多接口会以api作为prefix所以一次可以匹配很多但是在vite中需要注意的是如果你的文件命名也包含api就会在你访问你本地文件的时候被代理走从而找不到文件所以在配置proxy配置的时候需要注意不要和本地冲突因为vite的加载文件方式都是通过直接加载本地文件来实现的每一次的加载都是网络请求所以可能会被你的代理配置影响到如果出现404错误可以看看是不是这个原因。* 如果你的项目用到了websocket或者socket-io这类服务我们需要在vite.config.js中配置以下选项因为这可能和本地的hmr热更新发生冲突。我们需要手动变更下hmr的端口。hmr: {prot: 3888} #### 全局less|scss变量配置 我们有时可能会用到全局变量在webpack中我们只需要使用一个包style-resources-loader然后进行配置相信很多人都使用过在vite中更加简单我们只需要直接配置即可在vite.config.js中配置例如如下css: {preprocessorOptions: {less: {charset: false,additionalData: import ./src/style/common/common.less;}}}, 将其指向你的定义地址即可。#### require.context()失效 在webpack中我们经常需要批量注册比如一次注册文件下所有的图标store下面的所有模块等等都可以用到这个方法但是他是由webpack提供的所以现在不能用了vite为我们提供了替代方法import.meta.globEager比如store的模块注册可以下面这样批量注册const modulesFiles import.meta.globEager(./modules/*.js);const modules Object.keys(modulesFiles).reduce((modules, modulePath) {const moduleName modulePath.replace(/(./modules/)|(.js)/g, );const value modulesFiles[modulePath];modules[moduleName] value.default;return modules;}, {}); #### 图片引用失败 当我们引入图片的时候很可能告诉你路径不正确我们可以试想一下每次在加载图片的时候像你的项目询问获取图片这个时候的路径不是你本地项目的路径而是静态服务器的路径通过相对路径去获取就会404所以我们可以直接使用绝对路径绑定src/xxx这样的形式当然这只是其中一种方法。* 我们也可以通过new URL的方式去得到一个完整连接这种方法类似于path的拼接路径可以抽离成公共方法new URL(../assets/blogPhotos/${name}.jpg, import.meta.url).href; #### public目录与ico图标 这个目录和vue-cli生成的项目是大同小异放入这个文件夹的图片资源也不会被打包编译而是直接引用所以我们想要设置网站图标就可以把图标直接放在当中最简单的方式就是将图标转为svg图标放入然后在index.html模板当中引入即可。
缓存文件 vite的缓存是比较重的如果下载了某个依赖之后依然提示你找不到包的问题可以尝试去清除缓存或者删掉node_modules重新下载不要纠结一直找不到问题可能有时候就是他本身的问题clear:cache: # 清除项目缓存 \nrimraf node_modules/.cache/ rimraf node_modules/.vite, ### 总结 本文主要是为大家分享vue2项目配置vite工作所遇到的部分坑很多东西可能忘记了如果你也遇到了没法解约的文件欢迎留言可以追更到文章当中。 在awesome-vite 中我们可以找到目前主流我们需要的插件遇到不能解决的问题可以在这里看看。 总体来看vite是完全可以放在vue2当中使用的期间可能会遇到很多问题目前市面上都是有解决方案的如果你的项目也是启动花费大量的时间不如尝试切换到vite试试看吧目前来看是可行的。
最后
整理了75个JS高频面试题并给出了答案和解析基本上可以保证你能应付面试官关于JS的提问。 有需要的小伙伴可以点击下方卡片领取无偿分享
