Vite 初识及与webpack区别

Vite

Webpack 是先打包再运行，而 Vite 开发时并不打包，而是直接采用 ES Module 运行项目，部署的时候再打包，开箱即用。

Vite使用步骤

1. 初始化项目

yarn init -y

2. 安装 Vite

yarn add -D vite

3. Vite的源码目录就是项目根目录，创建index.html文件，以ES Module的方式引入js文件

<script type="module" src="./index.js"></script>

4. 在本地5173端口启动一个开发服务器，进行项目调试

yarn vite

5. 打包代码

yarn vite build

快速创建项目

参考 开始 | Vite 官方中文文档 (vitejs.cn)

yarn create vite

如果你选的是原生JS，你就会得到一个这样的完整项目路径：

配置文件

首先在根目录下创建vite.config.js文件，⚠️注意这里的抛出语法与 Webpack 不同，Webpack使用 CommonJS 语法，而 Vite 使用的是 ES Module 语法。

//webpack

module.exports = {
   ...
}

//vite

export default = {
   ...
}

这里Vite还提供了一个可选配置项defineConfig

import { defineConfig } from "vite";//需不需要提示
export default defineConfig({
   ...
})

它的作用是在我们写配置的时候会不会有提示。

加了：

没加：

对比不难发现区别。

Vite需要配置loader吗？

试验一下：

h2{
   background-color: pink;
}

import './index.css'
document.body.insertAdjacentHTML('beforeend','<h2>hello vite</h2>');

这里我们在js中引入css样式，然后yarn vite 运行一下

yarn add -D @vitejs/plugin-legacy terser

import { defineConfig } from "vite";//需不需要提示
import legacy from "@vitejs/plugin-legacy";
export default defineConfig({
   plugins:[
       legacy({
           targets:['ie 11'], //兼容IE 11
       })
   ]
})

我们来个箭头函数检验一下

document.body.onclick=()=>{
   alert('hello vite');
}

yarn vite build一下

我们可以看到Vite给我们生产了三个js文件和一个html文件，来分析一下：

index.js：

index-legacy.js：

这个文件中的箭头函数成功转成了普通函数；

polyfills-legacy.js：

这个文件的作用是用于向下兼容旧版浏览器，确保旧版浏览器能够读懂新特性。

index.html：

快捷命令

"scripts": {
 "dev": "vite",
 "build": "vite build",
 "preview": "vite preview"
},

同样放于package.json

vite webpack JavaScript

https://www.syntaxspace.com/article/2408051705538672.html