一. React 项目下

npm install vite @vitejs/plugin-react-refresh

在根目录下创建index.html文件，也就是项目启动依赖的html文件，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

将js模块ReactDom.render到root节点里即可；

  • 注意1：vite之所以快的一个原因是因为它利用了浏览器支持大部分es module的特性，所以在上面的html文件里需要加上type="module"；
  • 注意2：vite本身支持js、css、less、scss、postcss、Typescript、图片等，无需loader配置

vite速度快的原因：

  1. Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。比如lodash、react等库，只有在第一次启动的时候打包，然后放在node_modules下的.vite文件夹下，后面就不再打包。

    上面其实是两点原因：1. esbuild构建依赖 ； 2. vite进行了预构建，提高了性能；

  2. Vite 以 原生 ESM 方式提供源码，充分利用浏览器对es moudle支持的能力，vite对于es module 代码只负责转发，而不进行编译等处理；

  3. 并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

  4. Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

在vite启动（npx vite）后，默认在根目录寻找vite.config.js文件，
基础配置如下：
https://cn.vitejs.dev/config/

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';

const target = '';

export default defineConfig({
    plugins: [reactRefresh()],
    server: {
    	// 配置127.0.0.1 local.test.com
        host: 'local.test.com',
        proxy: {
            '^/signalPage': {
                secure: true,
                changeOrigin: true,
                target: `${target}test/api`
            }
        },
        open: true
    }
});

vite常用：

  1. defineConfig
    使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示

  2. CSS现在原生支持变量了，参考 css variable

  3. vite 自身内部支持scss、postCSS等，可以在最外层目录建一个postcss.config.js文件

  4. vite也有类似webpack alias的东西 resolve，配置如下：

export default defineConfig({
    plugins: [reactRefresh()],
    resolve: {
        alias: {
            '@styles': '/src/styles'
        }
    },
    server: {
        host: 'local.baidu.com',
        proxy: {
            '^/baidu/api': {
                secure: true,
                changeOrigin: true,
                target: 'http://m.baidu.com/'
            }
        },
        open: true
    }
});

  1. css module ，可以去了解下
    例如建立test.module.css文件，vite就会识别为css module文件

  2. CSS pre-processors
    css预处理，在vite里天然支持，只需要安装对应的预处理包就行

vite中使用TS
vite只编译，不校验

如何校验？

  1. vsCode 天生支持TS校验提示
  2. 在build前通过tsc校验
    "scripts": {
	"build": "tsc --noEmit && vite build"
}

vite 对 某些特殊情况对ts不支持，可以通过开启 "isolatedModules": true 来校验

"compilerOptions": {
	"target": "esnext",
	...
	"isolatedModules": true
}

静态文件处理

  • url
  • raw
  • worker / worker inline
import test from './test?url'
import test from './test?raw'

也可以很轻松引入json，还能对象解析

eslint 、 prettier
新建.eslintrc.js文件

环境变量：

  1. 内置环境变量：
    在这里插入图片描述
    在这里插入图片描述
  2. 自定义env
    新建.env文件，也可以根据环境建立.env.development 或者 .env.production文件 或者 .env.development.local
    // 注意需要增加VITE_前缀
VITE_TITLE=Hello

Vite的热更新
rollup是为第三方类库开发的打包构建工具，不是为业务项目使用的

预编译
vite在第一次启动的时候会将node_modules里的第三方包放在一个cache文件里.vite，下次再使用的时候直接从Cache里读取

cjs => commonJs

vite 会先将commonJS 转换成 esModule

也可以通过optimizeDeps来配置依赖性

vite在浏览器缓存上也做了处理，对性能极致追求。

Vite配置项

在这里插入图片描述

# react.js # javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL全文索引源码剖析之Insert语句执行过程

avatar 华为云开发者联盟
cover

如何利用 Seaborn 实现高级统计图表

avatar 华为云开发者联盟
cover

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

avatar 华为云开发者联盟