系统化学习前端之vite

标签：plugin 前端配置 js react config vite 系统化

前言

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

vite 是由两部分构成：

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

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

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

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

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

npm install -D less

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

npm install -D sass

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 资源无需配置，直接导入使用即可。

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

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

安装依赖

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

配置 vite.config.js

vite.config.js

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
	vue()
  ]
}

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

package.json
```
"type": "module"
```
如果报错 [vite] Internal server error: Failed to load PostCSS config，则配置 postcss.config.js。

修改 postcss.config.js -> postcss.config.cjs
执行指令
```
npx vite
```

vite 处理 .jsx 文件。

安装依赖

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

配置 vite.config.js

import react from '@vitejs/plugin-react'

export default {
  plugins: [
	react(),
  ]
}

如果报错 [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>
```
如果报错：Uncaught ReferenceError: React is not defined ，则报错文件导入 react。
```
import React from 'react'
```

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

vite 相关配置有很多，目前没有太多时间去梳理，慢慢来，还是要搬砖的，少年。

标签：plugin,前端,配置,js,react,config,vite,系统化
From： https://www.cnblogs.com/huangminghua/p/17184475.html