c593582006
新增调试工具目录 src/devtools/，提供完整的生产环境调试能力： - apiDebugger: 拦截所有 API 请求/响应，记录日志 - notificationDebugger: 测试浏览器通知，检查权限 - socketDebugger: 监听所有 Socket 事件，诊断连接状态 - 全局 API: window.__DEBUG__ 提供便捷的控制台调试命令 功能特性： - 环境变量控制：REACT_APP_ENABLE_DEBUG=true 开启 - 动态导入：不影响生产环境性能 - 完整诊断：diagnose()、performance()、exportAll() - 易于移除：所有代码集中在 src/devtools/ 目录 Webpack 配置： - 添加 'debug' alias 强制解析到 node_modules/debug - 添加 @devtools alias 简化导入路径 - 避免与 npm debug 包的命名冲突 🔧 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
102 lines
3.7 KiB
JavaScript
Executable File
102 lines
3.7 KiB
JavaScript
Executable File
// src/index.js
|
||
import React from 'react';
|
||
import ReactDOM from 'react-dom/client';
|
||
import { BrowserRouter as Router } from 'react-router-dom';
|
||
// 导入 Tailwind CSS 和 Brainwave 样式
|
||
import './styles/brainwave.css';
|
||
import './styles/brainwave-colors.css';
|
||
|
||
// Import the main App component
|
||
import App from './App';
|
||
|
||
// 导入通知服务并挂载到 window（用于调试）
|
||
import { browserNotificationService } from './services/browserNotificationService';
|
||
window.browserNotificationService = browserNotificationService;
|
||
|
||
// 🔧 条件导入调试工具（生产环境可选）
|
||
// 开启方式: 在 .env 文件中设置 REACT_APP_ENABLE_DEBUG=true
|
||
// 移除方式: 删除此段代码 + 删除 src/devtools/ 目录
|
||
if (process.env.REACT_APP_ENABLE_DEBUG === 'true') {
|
||
import('./devtools').then(({ debugToolkit }) => {
|
||
debugToolkit.init();
|
||
console.log(
|
||
'%c✅ 调试工具已加载！使用 window.__DEBUG__.help() 查看命令',
|
||
'color: #4CAF50; font-weight: bold; font-size: 14px;'
|
||
);
|
||
});
|
||
}
|
||
|
||
// 注册 Service Worker（用于支持浏览器通知）
|
||
function registerServiceWorker() {
|
||
// ⚠️ Mock 模式下跳过 Service Worker 注册（避免与 MSW 冲突）
|
||
if (process.env.REACT_APP_ENABLE_MOCK === 'true') {
|
||
console.log(
|
||
'%c[App] Mock 模式已启用，跳过通知 Service Worker 注册（避免与 MSW 冲突）',
|
||
'color: #FF9800; font-weight: bold;'
|
||
);
|
||
return;
|
||
}
|
||
|
||
// 仅在支持 Service Worker 的浏览器中注册
|
||
if ('serviceWorker' in navigator) {
|
||
// 在页面加载完成后注册
|
||
window.addEventListener('load', () => {
|
||
navigator.serviceWorker
|
||
.register('/service-worker.js')
|
||
.then((registration) => {
|
||
console.log('[App] Service Worker registered successfully:', registration.scope);
|
||
|
||
// 监听更新
|
||
registration.addEventListener('updatefound', () => {
|
||
const newWorker = registration.installing;
|
||
console.log('[App] Service Worker update found');
|
||
|
||
if (newWorker) {
|
||
newWorker.addEventListener('statechange', () => {
|
||
if (newWorker.state === 'activated') {
|
||
console.log('[App] Service Worker activated');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
})
|
||
.catch((error) => {
|
||
console.error('[App] Service Worker registration failed:', error);
|
||
});
|
||
});
|
||
} else {
|
||
console.warn('[App] Service Worker is not supported in this browser');
|
||
}
|
||
}
|
||
|
||
// 启动 Mock Service Worker（如果启用）
|
||
async function startApp() {
|
||
// 只在开发环境启动 MSW
|
||
if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') {
|
||
const { startMockServiceWorker } = await import('./mocks/browser');
|
||
await startMockServiceWorker();
|
||
}
|
||
|
||
// Create root
|
||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||
|
||
// Render the app with Router wrapper
|
||
root.render(
|
||
<React.StrictMode>
|
||
<Router
|
||
future={{
|
||
// v7_startTransition: true, // 禁用：导致路由切换延迟2秒，影响用户体验
|
||
v7_relativeSplatPath: true,
|
||
}}
|
||
>
|
||
<App />
|
||
</Router>
|
||
</React.StrictMode>
|
||
);
|
||
|
||
// 注册 Service Worker
|
||
registerServiceWorker();
|
||
}
|
||
|
||
// 启动应用
|
||
startApp(); |