如何让React-App识别"1n"形式的BigInt字面量？

我之前也碰到过一模一样的情况，你遇到的核心问题其实是自定义Babel配置没被React项目正确加载，尤其是用Create React App（CRA）初始化的项目，默认会忽略你自己写的.babelrc，导致@babel/plugin-syntax-bigint插件根本没生效。下面给你分场景说具体解决办法：

1. 如果是Create React App项目 #

CRA自带一套封闭的Babel配置，直接改.babelrc完全没用，得用工具覆盖或者eject出配置：

方案A：用Craco覆盖配置（推荐，可逆） #

• 先安装Craco工具：

  npm install @craco/craco --save-dev
  

• 在项目根目录新建craco.config.js，写入Babel插件配置：

  module.exports = {
    babel: {
      plugins: ["@babel/plugin-syntax-bigint"]
    }
  };
  

• 修改package.json里的启动脚本，把react-scripts替换成craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

• 重启开发服务器，96n这类BigInt字面量就能正常解析了。

方案B：Eject项目（不推荐，不可逆） #

如果你愿意放弃CRA的封装，完全掌控配置：

• 执行npm run eject（注意：这个操作一旦执行就没法恢复）
• 找到config/webpack.config.js，在处理JS/JSX的babel-loader配置里，给options.plugins添加@babel/plugin-syntax-bigint：

  {
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {
      customize: require.resolve(
        'babel-preset-react-app/webpack-overrides'
      ),
      plugins: [
        ['@babel/plugin-syntax-bigint'],
        // 保留原有其他插件
      ],
      // 其他原有配置...
    }
  }
  

• 重启服务后就能正常使用BigInt字面量了。

2. 如果是自定义Webpack的React项目 #

• 把你的Babel配置改成babel.config.js（而不是.babelrc，因为.babelrc是文件级配置，可能不会被组件编译流程读取），内容如下：

  module.exports = {
    presets: ['@babel/preset-react'],
    plugins: ['@babel/plugin-syntax-bigint']
  };
  

• 同时检查Webpack配置里的babel-loader，确保它正确引用了这个Babel配置。

补充说明 #

你用BigInt(96)能正常运行，是因为这是标准的函数调用语法，不需要额外插件就能被解析；而96n是ES2020新增的BigInt字面量语法，必须让Babel通过语法插件识别它，才能正常编译。

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