React-static站点集成Foundation构建失败问题求助

看起来你碰到的问题是React Static在构建阶段没有转译Foundation Sites的ES模块代码，导致Node环境无法识别import语法而报错——毕竟开发时的热重载服务器通常会处理这类转译，但构建流程默认会跳过node_modules里的代码。

这里有几个可行的解决方案，你可以按顺序试试：

• 方案1：配置React Static转译Foundation相关依赖
  找到项目根目录的static.config.js（如果没有就新建一个），添加babelInclude配置，告诉React Static需要转译Foundation及其依赖：

  export default {
    // 保留你原有的其他配置
    babelInclude: [
      /node_modules\/foundation-sites/,
      /node_modules\/jquery/,
      /node_modules\/what-input/,
    ],
  };
  

  这样构建时Babel就会处理这些包的ES模块语法，转换成Node能识别的CommonJS格式。

• 方案2：直接引入Foundation的UMD版本
  如果你不想修改Babel配置，可以换一种方式导入Foundation——直接用它预编译好的UMD版本（也就是浏览器兼容的打包版本）。把你代码里导入Foundation的语句改成：

  import 'foundation-sites/dist/js/foundation.min.js';
  

  这个版本已经是转译好的，不需要额外处理，能直接被构建流程识别。

• 方案3：检查Babel配置（如果自定义过）
  如果你项目里有.babelrc或babel.config.js，确保它包含了处理ES模块的预设，比如@babel/preset-env，并且针对当前Node环境做了配置：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }],
      "@babel/preset-react"
    ]
  }
  

试完上面的方法后，重新运行npm run build应该就能顺利完成构建了。

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