不得不说，vite 是革命性的

Lefex
1,602 阅读6分钟

在刚写前端的时候，我遇到过一个问题，在 html 文件中，使用 import 的引入一个 js 文件：

<body>
    <h2>pipeline demo</h2>
    <script type="module">
        import {popManager} from './usePipeline.js';
        popManager.run();
    </script>
</body>

在浏览器中直接打开这个 html 文件（file:///Users/wangsuyan/Desktop/easytask/examples/public/pipeline.html），你会发现在浏览器中报错：

image.png

当时，遇到这个问题，我苦思好久没找到一个比较好的解决方案，网上都说安装个 vscode 插件。直到有一天我写 webpack 的时候，发现了 webpack dev server。

随后，我写了一篇文章 搞一个万能的 webserver，这篇文章主要说明了如何使用 webpack dev server 来访问前端页面，这样既可以解决前面遇到的问题。如今再看这篇文章，觉得自己好傻。

后来，我搞 node 的时候，好像自己发现了新大陆似的，又写了一篇文章 几行代码搭建一个支持 esm 模块的 web 服务，这篇文章主要是通过 express 的静态服务搭建一个 webserver。核心代码：

const express = require('express');
const path = require('path');

const port = process.env.PORT || 8686;
const app = express();

// 把文件夹 suyan 的内容交给 express.static
app.use('/', express.static(path.join(__dirname, 'suyan')));

// start http server
app.listen(port, () => {
    console.log(`Open in browser http://localhost:${port}/index.html}`);
});

后来，我还真的在实际工作中用到了这种方式。

当时，我开发一个排版引擎的演示 demo，由于 webpack 这家伙很笨重，不想用它。我的场景其实就是一个简单的 html + ts。我直接使用 express 起一个静态服务，把 js 和 html 放到这个静态服务目录下即可，通过 tsc 可以把 TypeScript 实时转换成 js，这种方式除了把 TypeScript 转换成 js 需要一些时间外，不需要花费任何打包时间，演示 demo 足够了。代码变化后手动刷新下浏览器。

但是这种方式有几个缺点：

  • 1、代码更新后，需要手动刷新下浏览器才能看到效果；
  • 2、使用 import 引用 js 的时候，需要把文件后缀也加上，不然找不到文件，比如：import suyan from './index.js'；
  • 3、对于其它后缀的文件，浏览器解析不了，比如 suyan.vue；
  • 4、使用第三方库，不能这种引用方式 import vue from 'vue'，必须要使用一个路径，比如 import vue from './vue.js'； 当我正准备解决这些问题时，每天看到各种 vite 的文章，培训机构也开始吹捧 vite，前端圈又开始焦虑了。webpack 还没学会，又来了个 vite，尤大在重复造轮子......

此时，我选择忽略这些消息，仅了解到 vite 是一个新的打包工具，使用了原生模块化方案。上个周末，看了一个直播课，分享 vite 的实现原理，我闲来无事，就随便听听，不听不知道，一听吓一跳。

这家伙竟然把我上面遇到的 4 个问题都解决了，而且很完美，这引起了我的重视。这难道就不是我一直寻找的打包方案吗？

某天，跑了个项目，编译了半天，结果跑着跑着，报错了，我又重新编译了一次。我在想，我们目前这种编译方式是不是真的落后了，如果能把 vite 引进来，无疑是对整个团队的前端工程化提高一个档次。此时，vite 又引起了我的重视。

由于 vite 在效率方面能为整个团队提效，我决定开始拥抱 vite。

这不，我还专门把官方文档搬到公众号上 为什么选 Vite，目的是能够利用碎片时间把 vite 官方文档看完。你们看不看我不知道，反正我肯定会看的。

在学习一门新技术之前，我们要考虑它值不值得学，具体根据个人的实际情况，比如你在团队做工程化的事情，那肯定要学一下。我先给大家普及下什么是 vite。

大家想一下，我们使用 webpack 的时候，如果想使用 vue + ts 技术栈，webpack 需要做哪些配置？你需要配置 vue-loader、css-loader、ts-loader、配置入口、出口等，总之，很繁琐，有时候只是想写个 demo，而已！而且，经过 webpack 打包后的代码不友好。

而 vite 呢，在开发环境无需打包，也不是完全不用打包，只是你感觉不到它有打包的过程，它实现了一个「独特的 webserver」，能够让浏览器访问任意资源，并能够进行解析。大家想一下，当浏览器访问一个网页的时候，首先会加载一个 html，然后对 html 文件进行解析，如果遇到其它资源文件，比如遇到 js 文件、css 文件，这两类文件浏览器本身就能够解析。如果 js 中引用了 vue 文件、ts 文件，这些浏览器根本无法解析，但是 vite 做到了，我给大家演示一个基本的 demo：

演示 demo 使用的技术栈「vue2 + ts + less」，未使用脚手架创建项目。可以发现所有的资源在浏览器的 network 能够看到，你会发现这里包含 vue 文件，ts 文件，还有一些第三方库：

image.png

vite 的配置简单的让你不敢相信，仅需做几件事情：

  • 1、vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持，使用 less 的时候只需安装 less 这个库即可；

image.png

  • 2、TS 的支持，开箱即用，不用做任何配置，我分别使用了 vue-class-component 和 vue-property-decorator，均可正常工作：
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component({})
export default class SyFooter extends Vue {
    @Prop(String) slogan!: string;
    age = 20;
    name: string = '素燕';
}
</script>
  • 3、vue2 支持只需配置一个插件 ，该配置文件是 vite 所有的配置：

image.png

开发时，只需执行 npm run dev 即可：

image.png

如果使用 webpack 实现一个技术栈为 「vue2 + ts + less」的 demo，会配置很多内容，确实与 vite 无法相比。

那么线上代码如何打包呢？

vite 除了提供线下运行的 dev sever，还做到了能够同时打包线上代码，我们来运行下 npm run build：

image.png

总之，vite 是革命性的，它在开发环境中提供了 webserver 让整个研发过程中变得高效，同时又支持线上打包。虽然以前也有类似的方案，但一个库能不能成功，不只是有牛逼的技术，还有创始人的一些内在因素。

vite 虽然强大，但是在实际使用过程中肯定会存在一些问题，后面慢慢分享给大家，我先试着把公司项目利用业余时间使用 vite 跑通。本节内容 demo 可以在 github.com/lefex/FE 这里找到。

avatar
文章
阅读
粉丝