🔥 神器来袭:`vite-plugin-env-typed`,让环境变量类型安全起飞!

🔥 神器来袭: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)

🤝 贡献与反馈

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

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


📄 许可证

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


📚 项目地址

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

总结

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!