🔥 神器来袭:`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)
🤝 贡献与反馈
如果在使用过程中遇到问题,或有新的想法和建议,欢迎通过以下方式联系我们:
- 📬 GitHub Issues: github.com/JsonLee12138/vite-plugi...
- ✉️ Email: jsonlee_12138@icloud.com
- 💬 Discord: discord.gg/666U6JTCQY
欢迎提交 Issue 或 Pull Request,一起完善 vite-plugin-env-typed
!
📄 许可证
本插件采用 MIT 许可证,你可以自由地使用、修改和分发。
📚 项目地址
如果觉得这个库对你有帮助,欢迎 Star ⭐ 支持!也欢迎提 Issue 或 PR 一起完善~
有任何使用问题或需求,欢迎在评论区交流,我会及时回复 😊
总结
vite-plugin-env-typed
为 Vite 项目带来了便捷的环境变量类型支持,让你的开发过程更加高效、安全。如果你还在为环境变量的类型问题而烦恼,不妨试试这款插件,相信它会给你带来惊喜!
本作品采用《CC 协议》,转载必须注明作者和本文链接