vite共享配置之---define

define

定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换。

一、基本功能

define选项主要用于在开发期间和构建期间全局替换特定的字符串。这些替换在源码级别进行，意味着在代码运行之前，指定的变量或表达式就已经被替换成了相应的值。

二、配置方式

在vite.config.js或vite.config.ts文件中，可以通过define选项来配置全局替换规则。例如：

// vite.config.js
export default defineConfig({
  define: {
    '__APP_VERSION__': JSON.stringify('v1.0.0'),
    '__API_URL__': '"https://api.example.com"'
  }
});

在这个例子中，__APP_VERSION__和__API_URL__这两个变量在构建期间会被替换成相应的值。注意，对于非字符串值，Vite会自动使用JSON.stringify将其转换为字符串。

三、使用环境变量

define选项还可以用来定义环境变量，这些变量可以在项目的任何地方使用。例如，可以通过define将process.env中的变量暴露给代码：

// vite.config.js
export default defineConfig({
  define: {
    'process.env.MY_ENV': JSON.stringify('this is my env')
  }
});

然后，在项目的代码中就可以通过process.env.MY_ENV来访问这个环境变量了。

四、注意事项

1. 类型声明：对于使用TypeScript的开发者来说，为了确保类型检查和代码提示的正确性，需要在env.d.ts或vite-env.d.ts文件中添加相应的类型声明。
2. 构建时替换：需要注意的是，define中的替换是在构建时进行的，而不是在运行时。这意味着在开发模式下和构建后的代码中，这些变量的值是不同的。
3. 表达式限制：由于Vite使用esbuild进行替换，因此值的表达式必须是一个包含JSON可序列化值（null、boolean、number、string、array或object）或单一标识符的字符串。复杂的表达式或函数调用可能不会被正确替换。
4. 避免污染全局作用域：过度使用define可能会导致全局作用域被污染，从而影响代码的可读性和可维护性。因此，建议谨慎使用并合理组织全局常量

五、类型声明

如果是在vite.config.ts文件中定义了变量，需要新建一个vite-env.d.ts文件对变量进行声明，如下所示：

// vite-env.d.ts
/// <reference types="vite/client" />

declare const __APP_VERSION__: string;
declare const __ENVIRONMENT__: string;