JavaScript全栈模块化核心是分层复用而非直跑代码，仅工具函数、TS类型定义、配置常量三类可安全共享，须规避环境API依赖。
JavaScript 全栈项目中模块化不是为了“把同一份代码塞进前后端运行”，而是通过明确边界、分层设计和类型驱动，让前后端在各自环境里安全、高效地复用逻辑与契约。核心在于“可共享”不等于“可直跑”，关键看模块是否脱离环境依赖。
共用代码只限三类场景
真正能跨前后端复用的模块必须避开运行时特有 API：
-
工具函数：如日期格式化、URL 参数解析、深克隆、防抖节流等纯逻辑函数。导出为 ES 模块（
export）或 CommonJS（module.exports），但禁止使用document、localStorage、fs、process等环境专属对象。 -
TypeScript 类型定义：接口（
interface）、联合类型、泛型响应结构（如ApiResponse<T>）应统一放在/shared/types.ts中，前后端直接导入使用。这是最稳定、最推荐的复用方式。 -
配置与常量：API 基础路径、错误码映射表、枚举值（如
UserRole.Admin）可导出为 JS 对象或 JSON。注意前端需构建时注入（如 Vite 的import.meta.env或 Webpack 的DefinePlugin），后端读取process.env或配置文件。
模块格式与兼容性处理
前后端模块系统不同，需主动适配而非强行统一：
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- Node.js 默认用 CommonJS（
require/module.exports），但支持 ES 模块（需.mjs后缀或"type": "module"字段）；浏览器原生支持 ES 模块（<script type="module">）。 - 推荐全项目统一用 ES 模块语法（
import/export），借助构建工具（Vite、Webpack）自动转译和打包。避免混合写法，减少维护歧义。 - 若需发布共享包（如
@myapp/utils），用 TypeScript 编写 +tsup或rollup打包，同时输出 ESM 和 CJS 版本，并在package.json中正确声明"exports"字段。
类型即契约：用 TS 实现前后端一致性
类型复用是全栈协同的基石，它让接口变更在编译期暴露，而不是上线后报错：
立即学习“Java免费学习笔记（深入）”；
- 将所有 API 请求参数、响应体、数据库模型定义在
/shared/types下，前后端都 import 这些类型做校验和提示。 - 配合 OpenAPI（如 Swagger）或 GraphQL Schema，用工具（
openapi-typescript、graphql-codegen）自动生成类型文件，确保后端接口变更能同步到前端类型系统。 - 避免在类型文件中引入运行时逻辑（如
new Date()、fetch()），保持其纯粹的数据契约属性。
构建与工程隔离：多入口 + 不同 target
Webpack 或 Vite 需明确区分前后端构建目标：
- 前端入口（
/client/main.tsx）设置target: 'web'，启用 CSS、图片、HTML 插件，输出静态资源。 - 后端入口（
/server/index.ts）设置target: 'node'，用externals排除fs、path等原生模块，防止被打包进 bundle。 - 共享模块（
/shared/**）被两者共同引用，构建时按需分析依赖，不重复打包，也不强求运行时共存。
