🔥 神器来袭：vite-plugin-env-typed，让环境变量类型安全起飞！

在前端开发的世界里，Vite 以其闪电般的速度和强大的功能，成为了众多开发者的心头好。然而，在处理环境变量时，类型安全问题常常让人头疼不已。今天，我要给大家分享一款超棒的 Vite 插件——vite-plugin-env-typed，它能让你的环境变量拥有完整的 TypeScript 类型支持，开发体验直接拉满！

🌟 插件简介

vite-plugin-env-typed 是一个专门为 Vite 打造的插件，它的核心功能是自动生成 import_meta.d.ts 文件，为你的环境变量提供全面的类型支持。有了它，你在开发过程中就能享受到更好的类型提示和类型检查，代码的健壮性和可维护性大大提升！

💪 特性亮点

• 🚀 自动生成类型定义：无需手动编写繁琐的类型定义文件，插件会根据你的环境变量自动生成，省时又省力。
• 💡 完整的 TypeScript 支持：让你在使用环境变量时，能够充分利用 TypeScript 的类型系统，提前发现潜在的错误。
• ⚡️ 零配置，开箱即用：简单安装后，即可立即使用，无需复杂的配置过程。
• 🔒 类型安全的环境变量访问：通过类型检查，确保你在代码中正确地使用环境变量，避免因变量名拼写错误等问题导致的运行时错误。
• 🔄 支持环境变量文件变更自动更新类型定义：当你的环境变量文件发生变化时，插件会自动更新类型定义文件，保持类型的实时性。

📦 安装方法

# 使用 npm
npm install vite-plugin-env-typed -D

# 使用 yarn
yarn add vite-plugin-env-typed -D

# 使用 pnpm
pnpm add vite-plugin-env-typed -D

🛠 使用方法

1. 基础配置

在你的 vite.config.ts 中引入并配置插件：

// vite.config.ts
import { defineConfig } from 'vite'
import envTyped from 'vite-plugin-env-typed'

export default defineConfig({
  plugins: [
    envTyped()
  ]
})

2. 自定义配置

如果需要，更改以下可选项：

import { defineConfig } from 'vite'
import envTyped from 'vite-plugin-env-typed'

export default defineConfig({
  plugins: [
    envTyped({
      // 指定环境模式，默认为 process.env.NODE_ENV 或 import.meta.env.MODE
      mode: 'development',
      // 环境变量文件所在目录，默认为 process.cwd()
      envDir: './',
      // 环境变量前缀，默认为 ['VITE_']
      envPrefix: ['VITE_', 'CUSTOM_'],
      // 类型定义文件输出路径，默认为 'src/import_meta.d.ts'
      filePath: './src/types/import_meta.d.ts',
      // 是否在类型中包含实际值，默认为 false
      valueInType: true
    })
  ]
})

3. 在代码中使用环境变量

配置完成后，你就可以在代码中愉快地使用环境变量，并获得完整的类型提示：

console.log(import.meta.env.VITE_API_URL)

🤝 贡献与反馈

如果在使用过程中遇到问题，或有新的想法和建议，欢迎通过以下方式联系我们：

• 📬 GitHub Issues: github.com/JsonLee12138/vite-plugi...
• ✉️ Email: jsonlee_12138@icloud.com
• 💬 Discord: discord.gg/666U6JTCQY

欢迎提交 Issue 或 Pull Request，一起完善 vite-plugin-env-typed！

📄 许可证

本插件采用 MIT 许可证，你可以自由地使用、修改和分发。

📚 项目地址

• GitHub 仓库：github.com/JsonLee12138/vite-plugi...
• NPM 包：www.npmjs.com/package/vite-plugin-...

如果觉得这个库对你有帮助，欢迎 Star ⭐ 支持！也欢迎提 Issue 或 PR 一起完善~
有任何使用问题或需求，欢迎在评论区交流，我会及时回复 😊

总结

vite-plugin-env-typed 为 Vite 项目带来了便捷的环境变量类型支持，让你的开发过程更加高效、安全。如果你还在为环境变量的类型问题而烦恼，不妨试试这款插件，相信它会给你带来惊喜！

本作品采用《CC 协议》，转载必须注明作者和本文链接