如何基于单一代码库构建Web及桌面应用？咨询Linear/Height技术栈

你提到的这类Web和桌面UI高度统一、共享代码库的应用，目前行业内主流方案是基于React + Electron的组合，再配合现代构建工具和UI框架实现。下面分两部分解答你的问题：

一、这类应用的核心技术栈 #

• 前端框架：React（或Vue，React在这类场景更流行）—— 组件化开发能最大化复用Web和桌面端的UI代码，TypeScript作为标配保证代码可维护性。
• 桌面容器：Electron—— 基于Chromium和Node.js，直接把Web应用打包成Windows、Mac、Linux的原生桌面应用，同时能调用系统级API（比如文件访问、通知、快捷键）。
• 构建工具：Vite（或Webpack）—— 支持多环境、多入口构建，快速实现Web和桌面端的打包配置。
• 样式方案：Tailwind CSS（或CSS-in-JS方案如Styled Components）—— 实现统一的设计系统，保证Web和桌面UI风格高度一致。
• 状态管理：Zustand、React Query或Redux Toolkit—— 抽离共享的业务状态，跨平台复用状态逻辑。

二、基于单一代码库构建Web与桌面应用的实践步骤 #

1. 拆分项目结构，隔离平台无关与相关代码 #

把代码分成三层，避免平台耦合：

• src/core：存放纯业务逻辑，比如API请求封装、数据处理工具函数、状态管理核心—— 这部分完全和Web/桌面无关，两端共用。
• src/components：通用React组件，比如按钮、表单、列表—— 只写标准Web API，不调用Electron专属方法，保证两端都能渲染。
• src/platforms/web：Web端专属代码，比如路由配置、浏览器端的权限处理、PWA配置。
• src/platforms/desktop：Electron专属代码，包括主进程（窗口创建、系统菜单、快捷键注册）和渲染进程的平台适配逻辑。

2. 配置多环境构建流程 #

用Vite举例，在vite.config.ts里配置两个构建入口：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(({ mode }) => {
  const isDesktop = mode === 'desktop';
  return {
    plugins: [react()],
    build: {
      outDir: isDesktop ? 'dist/desktop' : 'dist/web',
      rollupOptions: {
        input: isDesktop ? 'src/platforms/desktop/renderer.tsx' : 'src/platforms/web/index.tsx',
      },
    },
    define: {
      'process.env.PLATFORM': JSON.stringify(isDesktop ? 'desktop' : 'web'),
    },
  };
});

然后在package.json里加脚本：

{
  "scripts": {
    "dev:web": "vite",
    "build:web": "vite build",
    "dev:desktop": "vite build --mode desktop && electron .",
    "build:desktop": "vite build --mode desktop && electron-builder"
  }
}

3. 封装平台API，实现逻辑复用 #

比如封装通知功能，让业务代码不用关心平台：

// src/core/services/notification.ts
export const showNotification = (title: string, body: string) => {
  if (process.env.PLATFORM === 'desktop') {
    // Electron端调用系统通知
    const { Notification } = window.require('electron');
    new Notification({ title, body }).show();
  } else {
    // Web端调用浏览器通知
    if (Notification.permission === 'granted') {
      new Notification(title, { body });
    }
  }
};

业务组件里直接调用showNotification即可，不用写平台判断。

4. 开发与测试的统一体验 #

• Web端直接跑npm run dev:web，和普通React项目一样调试。
• 桌面端跑npm run dev:desktop，Electron会加载构建后的Web页面，同时支持热更新。
• 测试时，核心逻辑用Jest/Vitest单独测试，UI组件用React Testing Library，平台特定代码单独写测试用例（比如Electron主进程可以用spectron测试）。

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