告别混乱配置！BewlyBewly环境变量全攻略：从开发到生产的无缝切换

你是否曾因浏览器插件开发中的环境配置问题而头疼？在BewlyBewly项目中，我们提供了一套灵活高效的环境变量管理方案，让你轻松应对开发、测试和生产环境的切换。本文将带你深入了解BewlyBewly的环境配置机制，掌握多环境变量的设置技巧，以及如何通过构建脚本实现自动化环境管理。

项目概览：BewlyBewly的环境架构

BewlyBewly是一个致力于提升Bilibili主页体验的浏览器插件，通过重新设计界面、添加更多功能和个性化选项来满足用户需求。项目支持多语言，包括英语、简体中文、繁体中文和粤语，这意味着环境配置需要考虑国际化因素。

项目的环境管理核心集中在构建脚本和配置文件中，主要通过Node.js环境变量和构建参数来实现不同环境的区分和配置。

核心环境变量文件

虽然BewlyBewly没有使用传统的.env文件，但项目通过以下关键文件实现了环境变量的管理：

• package.json：定义了项目的依赖和脚本命令
• vite.config.ts：Vite构建配置，包含环境变量注入
• scripts/prepare.ts：准备脚本，处理环境相关文件
• scripts/utils.ts：工具函数，提供环境判断等功能

开发环境配置：实时调试与热重载

在开发过程中，BewlyBewly使用Vite作为构建工具，提供了快速的热重载和调试体验。开发环境的配置主要通过npm脚本和Vite配置实现。

启动开发环境

通过以下命令启动开发环境：

npm run dev

或者针对Firefox浏览器：

npm run dev-firefox

这些命令定义在package.json的scripts部分，设置了NODE_ENV和FIREFOX等环境变量，然后执行多个并行任务。

开发环境变量解析

在scripts/utils.ts中，定义了判断当前环境的工具函数：

export const isDev = process.env.NODE_ENV !== 'production'
export const isFirefox = !!process.env.FIREFOX

这些变量在整个构建过程中被广泛使用，用于决定文件输出路径、特性开关等关键配置。

Vite开发配置

vite.config.ts中针对开发环境做了特别优化：

export default defineConfig(({ command }) => ({
  // ...其他配置
  server: {
    port,
    hmr: {
      host: 'localhost',
    },
  },
  // ...其他配置
}))

开发服务器配置确保了插件开发过程中的热重载功能，大大提升了开发效率。

生产环境构建：优化与打包

当需要构建生产版本时，BewlyBewly提供了完善的打包脚本，自动处理环境变量切换和代码优化。

构建生产版本

使用以下命令构建生产版本：

npm run build

或者针对Firefox浏览器：

npm run build-firefox

这些命令会将NODE_ENV设置为production，触发Vite的生产构建流程。

生产环境优化

在生产环境中，BewlyBewly会自动应用一系列优化措施：

1. 代码压缩和混淆
2. 移除调试信息
3. 优化资源加载
4. 针对不同浏览器的适配处理

这些优化在vite.config.ts的build部分定义：

build: {
  outDir: r(isFirefox ? 'extension-firefox/dist' : 'extension/dist'),
  emptyOutDir: false,
  sourcemap: false, // 生产环境不生成sourcemap
  terserOptions: {
    mangle: false, // 保持代码可读性，符合Chrome商店政策
  },
  // ...其他配置
}

打包扩展文件

构建完成后，可以使用以下命令将扩展打包为发布格式：

npm run pack

该命令会生成CRX（Chrome）和XPI（Firefox）格式的扩展文件，方便发布到应用商店。

多浏览器支持：Chrome与Firefox环境区分

BewlyBewly同时支持Chrome和Firefox浏览器，通过环境变量实现了两套构建配置的无缝切换。

浏览器环境变量

通过设置FIREFOX环境变量，可以切换到Firefox构建模式：

cross-env NODE_ENV=development FIREFOX=true run-p dev:*

这个环境变量会影响整个构建流程，从文件输出路径到特性支持。

浏览器特定处理

在scripts/prepare.ts中，根据isFirefox变量决定文件的输出路径：

await fs.ensureDir(r(isFirefox ? `extension-firefox/dist/${view}` : `extension/dist/${view}`))

同样，在vite.config.ts中，也根据isFirefox变量设置不同的输出目录：

build: {
  outDir: r(isFirefox ? 'extension-firefox/dist' : 'extension/dist'),
  // ...其他配置
}

这种设计确保了Chrome和Firefox版本可以并行开发和构建，互不干扰。

高级配置：自定义环境变量

虽然BewlyBewly没有使用.env文件，但你仍然可以通过npm脚本和构建配置来添加自定义环境变量，实现更灵活的环境管理。

添加自定义环境变量

在npm脚本中添加自定义环境变量：

cross-env NODE_ENV=development MY_CUSTOM_VAR=value npm run dev

然后在代码中通过process.env.MY_CUSTOM_VAR访问这个变量。

在Vite中注入环境变量

在vite.config.ts中，使用@rollup/plugin-replace插件可以将环境变量注入到代码中：

replace({
  '__MY_CUSTOM_VAR__': JSON.stringify(process.env.MY_CUSTOM_VAR),
  'preventAssignment': true,
}),

这样配置后，你就可以在源代码中使用__MY_CUSTOM_VAR__常量了。

环境变量的作用域

需要注意的是，BewlyBewly中的环境变量主要作用于构建过程，而不是运行时。如果需要在插件运行时使用动态配置，可以考虑以下方案：

1. 使用浏览器的localStorage或chrome.storage API存储配置
2. 在src/stores/mainStore.ts中添加配置管理
3. 通过src/options/Options.vue提供用户配置界面

故障排除：环境配置常见问题

在配置BewlyBewly环境时，可能会遇到一些常见问题。以下是解决方案：

环境变量不生效

如果发现环境变量没有按预期工作，请检查：

1. 确保使用了cross-env包来设置环境变量，特别是在Windows系统上
2. 检查变量名是否正确，环境变量区分大小写
3. 确认变量是在正确的脚本中设置的

构建目录混乱

如果构建输出目录出现混乱，可能是因为：

1. 之前的构建文件没有被正确清理
2. 同时运行了多个不同环境的构建命令

解决方法是运行清理命令：

npm run clear
# 或者针对Firefox
npm run clear-firefox

浏览器兼容性问题

如果在特定浏览器中遇到问题，检查是否使用了正确的构建命令：

• Chrome：使用npm run dev和npm run build
• Firefox：使用npm run dev-firefox和npm run build-firefox

总结与最佳实践

BewlyBewly通过灵活的环境配置机制，实现了开发、测试和生产环境的无缝切换，同时支持Chrome和Firefox两大浏览器平台。以下是环境配置的最佳实践：

1. 保持环境一致性：使用npm脚本而不是手动设置环境变量
2. 明确环境区分：在代码中清晰判断环境，避免环境相关bug
3. 优化构建流程：根据环境应用不同的优化策略
4. 版本控制：不要将构建产物提交到版本控制，只保留源代码
5. 文档化：记录项目中使用的环境变量及其含义

通过本文介绍的环境配置方法，你可以轻松管理BewlyBewly的各种环境，专注于功能开发而不是配置问题。无论是开发新功能、修复bug还是发布新版本，这套环境管理方案都能为你提供可靠的支持。

如果你有任何环境配置相关的问题或建议，欢迎通过项目的贡献指南参与讨论和改进。

扩展阅读

• 官方文档
• 开发指南
• Vite配置参考
• 构建脚本
• 样式适配指南