vite 初体验

Vite是什么？

Vite 是Vue作者开发的一款想要取代webpack的工具（基于原生 ES-Module 的前端构建工具）
其原理是利用ES6的import发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去了webpack冗长的打包时间

所以本质 Vite 其实就是利用了浏览器模块化功能的一个代理转化器，转化器应该能明白吧，就是类似 .vue 转化成 .js 文件。

webpack 官网的例子已经很形象了。就把有相互依赖关系的模块，聚合转化成单个 .js 文件、单个 .css文件以及其他的一些静态文件。

可以看到由于之前的浏览器没有讲模块化的方式统一， 因此是利用了自己的模块化方式，将资源都打包成一个JS，而 Vite 做的就是去除了自己定义一套模块化方式，改用了浏览器默认支持的 ESM, 就将聚合这一部分在实现中去除了，只剩下了转化。

Vite 的安装和运行

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用NPM:

$ npm create vite@latest

使用Yarn：

$ yarn create vite

使用PNPM:

$ pnpm create vite

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

在vite项目中新增eslint

详细讲解