系统化学习前端之vite

前言

”天下苦 webpak 久矣“。webpack 虽然解决了前端工程化的问题，但是 webpack编译打包过程中自身性能的问题随着项目代码的增长逐渐暴露出来，老前端们开始追求开发体验和项目构建速度，新一代前端构建工具应运而生，vite 闪亮登场（vite logo 是个闪电唉）。

vite

vite 是基于 ESBuild 和 Rollup 的高级封装，使用简单，速度快。

vite 是由两部分构成：

1. 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。

2. 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

简而言之，vite 提供一个开发服务器（基于 connect），提高开发效率；vite 提供一套指令，vite 指令执行优化后配置的 Rollup 操作，简化配置优化性能。

vite 的工作原理

首先要明确一点：当前浏览器默认是支持 ES Module 模式的。因此，vite 是通过 Rollup 优化并输出 ES Module 模式的文件，可以直接应用于浏览器。

注意：浏览器因同源策略问题，请求资源文件需要通过服务器，HTML 文件通过 script 标签引入ES Module 文件，需要指定 type="module" 属性。

vite 的基本用法

vite 处理样式资源

1. vite 处理 css 资源无需配置，直接导入 css 资源即可。

2. vite 处理 less 资源，只需安装 less即可，无需配置，导入 less 资源即可。

   npm install -D less
   

3. vite 处理 scss 资源，只需安装 sass 即可，无需配置，导入 scss 资源即可。

   npm install -D sass
   

4. vite 处理 stylus 资源，只需安装 stylus 即可，无需配置，导入 stylus 资源即可。

   npm install -D stylus
   

5. vite 处理样式的浏览器前缀，需安装 postcss 和 post-preset-env，配置 postcss.config.js 即可。

   npm install -D postcss post-preset-env
   

   postcss.config.js

   module.exports = {
     plugins: [
   	require('postcss-preset-env')
     ]
   }
   

vite 处理 ts 资源

1. vite 处理 ts 资源无需配置，直接导入使用即可。

vite 处理图片资源

vite 处理图片资源无需配置，直接导入使用即可。

vite 处理 vue 资源（vite4 + vue3）

vite 处理 .vue 单文件组件。需要安装 @vitejs/plugin-vue ，并配置 vite.config.js。

1. 安装依赖

   npm isntall -D vue
   npm install @vitejs/plugin-vue -D
   

2. 配置 vite.config.js

   vite.config.js

   import vue from '@vitejs/plugin-vue'
   
   export default {
     plugins: [
   	vue()
     ]
   }
   

3. 如果报错 Error: Cannot find module 'node:xx' ， 则配置 package.json。

   package.json

   {
       "type": "module"
   }
   

4. 如果报错 [vite] Internal server error: Failed to load PostCSS config，则配置 postcss.config.js。

   修改 postcss.config.js -> postcss.config.cjs

vite 处理 react 资源（vite4 + react18）

vite 处理 .jsx 文件。

1. 安装依赖

   npm install -D react  
   npm install -D @vitejs/plugin-react
   

2. 配置 vite.config.js

   import react from '@vitejs/plugin-react'
   
   export default {
     plugins: [
   	react(),
     ]
   }
   

3. 如果报错 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. ，两种办法解决。

   • 安装配置 @babel/plugin-transform-react-jsx。

     安装依赖

     npm install -D @babel/plugin-transform-react-jsx
     

     配置 vite.config.js

     import react from '@vitejs/plugin-react'
     
     export default {
       plugins: [
     	react({
     	  babel: {
     		plugins: [ '@babel/plugin-transform-react-jsx' ],
     	  }
     	}),
       ]
     }
     

   • 修改 main.js 为 main.jsx。

     index.html 更改引入

     <script src="./src/main.jsx" type="module"></script>
     

4. 如果报错：Uncaught ReferenceError: React is not defined ，两种办法解决。

   报错文件导入 react

   import React from 'react'
   

   在 vite.config.js 文件中配置 esbuild.jsxInject

   import react from '@vitejs/plugin-react'
   
   export default {
     plugins: [
   	vue(),
   	react(),
     ],
     esbuild: {
   	jsxInject: `import React from 'react'`
     }
   }
   

   注意：esbuild.jsxInject 只为 .jsx 文件注入 react，main.js 文件是无法注入，需要修改为 main.jsx。

上述资源处理，代码可参考 vite-demo 项目。

后记

vite 相关配置有很多，更多配置可参考 vite 官网。因为 vite 是高级封装，所以相当于 webpack 配置方面会更加简单，此外，vite作为打包工具，也封装了热门框架的脚手架指令，如 vue-cli，react-cli 类似，可以直接创建项目。

npm 使用

npm create vite

yarn 使用

yarn create vite