如何在SvelteKit中区分开发与生产构建的功能？

核心思路是利用环境变量区分开发/生产环境，只在开发环境加载或渲染调试工具。以下是不同场景的具体实现：

通用基础方案 #

通过判断当前环境标识（比如process.env.NODE_ENV），控制调试工具的引入和渲染：

// 仅在开发环境加载调试工具
if (process.env.NODE_ENV === 'development') {
  // 异步引入调试工具模块，避免影响生产构建
  import('./dev-debug-tools.js').then(module => {
    module.init(); // 初始化调试工具
  });
  // 直接挂载调试UI示例
  const debugPanel = document.createElement('div');
  debugPanel.innerHTML = '<h3>开发调试面板</h3><p>这里放置调试控件</p>';
  debugPanel.style.cssText = 'position:fixed;top:0;right:0;z-index:9999;background:white;padding:10px;border-left:1px solid #eee;';
  document.body.appendChild(debugPanel);
}

框架/构建工具专属方案 #

Vite 项目 #

Vite自带import.meta.env.MODE变量，直接判断环境：

<!-- Vue组件中渲染调试工具 -->
<template>
  <div>
    <!-- 仅开发环境显示调试组件 -->
    <DevDebugTool v-if="isDev" />
    <!-- 业务内容 -->
  </div>
</template>

<script setup>
import DevDebugTool from './components/DevDebugTool.vue';
const isDev = import.meta.env.MODE === 'development';
</script>

Webpack 项目 #

Webpack默认注入process.env.NODE_ENV，也可自定义环境变量强化判断：

// webpack.config.js 中配置自定义环境变量
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.ENABLE_DEBUG': JSON.stringify(process.env.NODE_ENV === 'development')
    })
  ]
}

// 业务代码中使用
if (process.env.ENABLE_DEBUG) {
  // 加载调试工具逻辑
  const debugTool = require('./dev-debug-tools.js');
  debugTool.init();
}

React 项目 #

结合process.env.NODE_ENV控制调试组件渲染：

function App() {
  return (
    <div className="App">
      {/* 仅开发环境渲染调试面板 */}
      {process.env.NODE_ENV === 'development' && <DevDebugPanel />}
      {/* 业务组件 */}
    </div>
  );
}

关键注意事项 #

• 生产构建时，打包工具会自动移除if (false)分支下的代码，不会增加生产包体积
• 不要将敏感业务逻辑或数据放在调试工具中，避免意外泄露
• 第三方调试库（如React DevTools、Vue DevTools）本身会自动识别生产环境并禁用，无需额外处理

内容的提问来源于stack exchange，提问作者Localghost