前言

有幸在公司中重构了一个小小的前端项目，然而项目虽小，但是功能仍需要完善。

概述

在这次重构中，采用了vite的3版本作为开发打包工具，并使用react18作为UI框架。

内置环境变量

Vite中内置了四个环境变量，分别为MODE、DEV、PRD与SSR

import.meta.env.MODE：

MODE这个环境变量，我认为是四个环境变量中最有用的
当运行命令设置--mode参数后，此值为设置的参数值

console.log(import.meta.env.MODE); // development

import.meta.env.DEV：

打包时NODE_ENV若为production，则此值为false
不设置MODE时运行打包命令，此值为false

console.log(import.meta.env.DEV); // true

import.meta.env.PRD：

打包时NODE_ENV若为production，则此值为true
若设置了MODE则需在环境变量配置文件中设置NODE_ENV为production
此值始终与DEV值相反

console.log(import.meta.env.PRD); // false

import.meta.env.SSR：

项目若运行在SSR模式下，则此值为true
此项目并未采用SSR，故值为false

console.log(import.meta.env.SSR); // false

自定义环境变量

配置方式与vue-cli一致

.env.$mode文件

创建.env.$mode文件，比如ST环境使用的配置文件名为.env.st

vite本地开发模式下默认使用.env.development文件，vite build命名默认使用.env.production文件

非development与production配置文件中，如果需要设置NODE_ENV为production，需要自行设置

development文件中NODE_ENV默认为development，production文件中NODE_ENV默认为production

在文件内定义自定义打包变量时，除NODE_ENV外的变量名需以VITE_开头

vite-env.d.ts

在项目中实际使用自定义的环境变量时，可以在src目录下新建vite-env.d.ts文件，并在此文件写入环境变量的ts类型，具体内容如下：

/// <reference types="vite/client" />

interface ImportMetaEnv {
    // 用于区分不同打包场景的环境变量
    readonly VITE_BUILD_ENV: string;
}

--mode参数

在package.json中在scripts下定义不同打包命令，比如"build:st": "tsc && vite build --mode st"

路径别名设置

以设置@为src为例，需要分别在tsconfg与viteconfig中配置

1.tsconfig中配置

{
    "compilerOptions": {
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}

2.viteconfig中配置

import {defineConfig} from 'vite';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig ({
    resolve: {
      alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }]
    },
})

浏览器兼容

使用官方提供的@vitejs/plugin-legacy插件实现，注意此插件只在打包时生效

import {defineConfig} from 'vite';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig ({
    plugins: [
      legacy({ targets: ['chrome >= 64'] }),
    ],
})

变量注入HTML文件

使用vite-plugin-html插件实现

1.viteconfig中配置

import {ConfigEnv, defineConfig, loadEnv} from 'vite';
import {createHtmlPlugin} from 'vite-plugin-html';

// https://vitejs.dev/config/
export default function createViteConfig({mode}: ConfigEnv) {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    plugins: [createHtmlPlugin({inject: env})],
  });
}

在该设置下，变量配置在对应的env.mode文件中即可

2.html中使用

使用<%=和%>来包裹变量

<meta name="name" content="<%= VITE_BUILD_ENV %>" />

Externals配置

使用vite-plugin-externals插件来实现

import {defineConfig} from 'vite';
import {viteExternalsPlugin} from 'vite-plugin-externals';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteExternalsPlugin({
      react: 'React',
      'react-dom/client': 'ReactDOM',
    }),
  ],
});

这里配置的key比如react，为import语句中from后的文本，比如react-dom/client

这里配置的value比如React为umd脚本在window下的变量名

Vite常用功能实现记录

前言

概述