React TypeScript项目中如何将src常量导入craco.config.js？

方案1：用纯CommonJS文件共享常量 #

把颜色常量单独放在一个.js文件里，同时兼容CommonJS和ES模块导入：

1. 新建src/color-config.js，用CommonJS导出常量：

module.exports = {
  colorDict: {
    primary: '#1890ff',
    success: '#52c41a',
    // 其他颜色定义
  }
};

2. 在craco.config.js中导入：

const { colorDict } = require('./src/color-config');

module.exports = {
  // 你的craco配置，比如配置less的modifyVars
  style: {
    less: {
      modifyVars: colorDict,
      javascriptEnabled: true
    }
  }
};

3. 在src/theme.ts中导入使用：

// TypeScript支持直接导入CommonJS模块
import { colorDict } from './color-config';

方案2：将craco配置改为TypeScript文件 #

让craco使用TS配置文件，直接导入TS模块：

1. 安装依赖：

npm install ts-node typescript --save-dev

2. 将craco.config.js重命名为craco.config.ts，并直接导入theme.ts：

import { colorDict } from './src/theme';

export default {
  // 你的craco配置
  style: {
    less: {
      modifyVars: colorDict,
      javascriptEnabled: true
    }
  }
};

3. 修改package.json中的启动脚本，用ts-node运行craco：

{
  "scripts": {
    "start": "ts-node node_modules/craco/bin/craco.js start",
    "build": "ts-node node_modules/craco/bin/craco.js build",
    "test": "ts-node node_modules/craco/bin/craco.js test"
  }
}

方案3：让theme.ts同时支持ES和CommonJS导出 #

在theme.ts中添加CommonJS导出，兼容Node.js的require：

1. 修改src/theme.ts：

export const colorDict = {
  primary: '#1890ff',
  // 其他颜色
};

// 添加CommonJS导出，供craco.config.js使用
// @ts-ignore 忽略TS的类型警告
module.exports = { colorDict };

2. 在craco.config.js中导入：

const { colorDict } = require('./src/theme.ts');

module.exports = {
  // 你的craco配置
};

报错原因说明 #

• craco.config.js是Node.js运行的CommonJS模块，无法直接用import导入ES模块（.ts默认是ES模块，除非tsconfig设置module: CommonJS）。
• 用require导入.ts文件时，Node.js不会自动编译TypeScript，且如果.ts里有ES模块的import语句，会触发SyntaxError，因为CommonJS环境不识别ES模块语法。

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