Node与React之间共享常量变量的问题及解决方案咨询

我之前也碰到过一模一样的问题！核心原因是React项目默认使用ES模块（export/import语法），而Node默认采用CommonJS模块系统（require/module.exports语法），直接跨模块系统导入就会触发语法错误。下面是几个亲测有效的解决方案：

方案1：让Node项目支持ES模块 #

这是最推荐的现代做法，一步到位统一模块系统：

• 在Node项目根目录的package.json中添加一行配置：

  "type": "module"
  

• 配置完成后，Node会把所有.js文件当作ES模块处理，你就可以用和React端完全一致的导入语法了：

  import { X, Y, Z } from './constants.js'; // 注意必须加上.js后缀
  

方案2：让常量文件兼容两种模块系统 #

如果不想修改Node的模块配置，可以调整constants.js的写法，让它同时适配ES模块和CommonJS：

// constants.js
const X = 'x';
const Y = 'y';
const Z = 'z';

// 给Node的CommonJS环境导出
if (typeof module !== 'undefined' && module.exports) {
  module.exports = { X, Y, Z };
}
// 给React的ES模块环境导出
export { X, Y, Z };

这样不管是React用import还是Node用require('./constants')，都能正确获取到常量。

方案3：用转译工具适配模块系统 #

如果你的Node项目已经在使用Babel之类的转译工具，可以通过它把ES模块转译为CommonJS：

• 安装必要依赖：

  npm install @babel/core @babel/cli @babel/preset-env --save-dev
  

• 在项目根目录创建.babelrc配置文件：

  {
    "presets": ["@babel/preset-env"]
  }
  

• 要么提前转译constants.js文件，要么直接用@babel/node运行Node脚本，这样就能直接用require导入ES模块文件了。

小提醒 #

如果常量文件在子目录中（比如src/shared/constants.js），导入时要写对相对路径；另外Node开启ES模块模式后，导入文件必须加上完整的.js后缀哦！

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