本文正在参与「金石方案 . 分割6万现金大奖」

天下苦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模块便是咱们常说的ESM，ESM是一种标准，在前期，咱们的浏览器只支撑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种标准相互不兼容的情况，提出了兼容三者格局的UMD（Universal Module Definition）标准，在运用打包东西打包类库的时分往往会有一个打包类型的选项，许多包都会挑选UMD便是这个原因。

可是很显然这些办法是必定存在痛点的，尽管看起来将不同标准在东西集进步行了抹平差异，可是因为一些兼容性的问题，这些差异就会被放大，所以当多个东西呈现在一个项目的时分，实际是便是为了抹平这些差异化的存在。

上面的这些标准是一些题外话了，和本文关系不大，可是值得每一位前端开发去了解，正是因为ESM标准的优异，才使得浏览器会去原生支撑他，当然关于这些标准一般都是先界说后完结，这个界说在前期现已被界说了，仅仅浏览器的支撑是渐渐跟上的，总而言之，在现在，咱们现已能够去运用这一特性了。

浏览器原生支撑ESM有什么用？

这儿的东西也相对较多，咱们就长话短说，在之前，咱们都是经过script标签进行引进的。

这个标签引进的脚本负责交互。

可是一个大型的项目当然不仅仅只要一个js文件，关于繁多的文件，咱们想要很好的办理就显得有些难度，所以咱们凭借webpack这类东西，其将咱们的文件打包为bundle.js，再将文件。这意味着咱们的前端开发作业流从“石器时代”跨越到了“工业时代”，可是对浏览器来说并没有质的改变，它所加载的代码仍然一个 bundle.js ，整体引进到咱们的项目傍边。

可是跟着浏览器对 ES Module 标准的原生支撑，改变了这种情况。现在大多数浏览器现已支撑经过<script type="module">的办法加载标准的 ES 模块。这也就意味着相似咱们之前在webpack傍边的这些引进不需求再进行打包编译了，浏览器能够原生去支撑，去经过module引进，而一旦浏览器帮咱们做了这些事，咱们就能够省掉这最耗时的打包编译阶段了。

当然这儿的总结还不是很全面，可是咱们需求了解到其这些最为直观明显的优势，在了解完这些特性之后，咱们直接进入进入今日的主题。

运用vite来构建你的Vue2项目

现在许许多多的文章都是支撑vue3的，包含官方也是默许支撑vue3版别，可是实际情况来看，许多公司并不会过早的将vue版别从2切换到3，咱们公司便是这样，所以想要运用vite去开发vue2的项目就需求去处理许多兼容问题，碰巧本人需求去重构一个vue2的项目，所以就直接运用上了vite+vue2的组合，在实际运用下来来看，我觉得现在vite现已完全是能够支撑vue2的运用了，在此期间，也踩了许多坑，把这些经历分享给咱们，让咱们少走弯路。

webpack晋级vite项目建立攻略

单纯的晋级会因为不同的项目差异让人利诱，咱们直接从零开端去构建一个项目，方便巨细理解以及切换自己项目的时分愈加轻松。

现在官方默许的脚手架东西创立的项目都是默许vue3的版别，所以，假如想要自己去创立项目，要么自己运用vue-cli建立完项目之后修正，要么就直接自己从0开端，这儿咱们直接运用后者，咱们开端来建立一个项目

  1. 直接运用npm初始化一个项目

    mkdir vue2vite
npm init  -y

  2. 咱们需求一个进口文件和一个模板创立两个文件

    touch main.js
touch index.html

  3. 这个index.html文件相似webpack的模板文件，咱们需求手动引进咱们的main.js文件，而且需求留意的是，咱们需求对script声明type=module

    <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>vue2vite</title>
 </head>
 <body>
   <div id="app"></div>
   <script type="module" src="./main.js"></script>
 </body>
</html>

  4. 此刻咱们需求下载咱们的东西vite，因为我在运用的时分仍是v3版别，此刻现已更新到v4了，这儿我仍是用v3来演示，咱们运用时请留意版别。

    pnpm add vite@3.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-compiler@2.6.11**
```shell
pnpm add vite-plugin-vue2 -D
pnpm add vue-template-compiler@2.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": "# 清除项目缓存 n    rimraf node_modules/.cache/ rimraf node_modules/.vite",

总结

  • 本文首要是为咱们分享vue2项目装备vite作业所遇到的部分坑，许多东西或许忘记了，假如你也遇到了没法解约的文件，欢迎留言，能够追更到文章傍边。
  • 在awesome-vite 中咱们能够找到现在主流咱们需求的插件，遇到不能处理的问题，能够在这儿看看。
  • 总体来看，vite是完全能够放在vue2傍边运用的，期间或许会遇到许多问题，现在市面上都是有处理方案的，假如你的项目也是发动花费许多的时刻，不如测验切换到vite试试看吧，现在来看是可行的。