React项目局域网无法访问+npm run build压缩ipfs-api代码失败求助

一、局域网访问仅显示HTML模板的解决方法 #

• 修改开发服务器监听地址：在项目根目录的package.json中，找到scripts里的start命令，修改为类似"start": "react-scripts start --host 0.0.0.0"（如果使用react-scripts）；若是Truffle开发服务器，编辑truffle-config.js，将development网络的host设为"0.0.0.0"，确保项目端口（如3000、7545）对外开放。
• 配置虚拟机网络：将Debian虚拟机的网络模式改为桥接模式，保证虚拟机获取局域网同网段IP地址。
• 开放端口或调整防火墙：执行sudo ufw allow 3000/tcp（替换为你的项目实际端口），或临时关闭防火墙sudo ufw disable测试。

二、npm run build压缩ipfs-api文件失败的解决方法 #

针对./node_modules/ipfs-api/src/utils/module-config.js第7行的编译错误，按以下步骤处理：

1. 调整Webpack转译配置 #

如果项目使用Webpack，修改webpack.config.js，将ipfs-api纳入Babel转译范围：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules(?!\/ipfs-api)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

执行命令安装适配依赖：npm install babel-loader@7 babel-preset-env --save-dev

2. 替换压缩工具 #

若因UglifyJS不支持ES6语法导致错误，替换为Terser插件：

• 卸载旧插件：npm uninstall uglifyjs-webpack-plugin
• 安装兼容版本：npm install terser-webpack-plugin@1 --save-dev
• 修改Webpack配置：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};

3. 锁定兼容的ipfs-api版本 #

适配2018年BootCamp项目的环境，安装指定版本：

• 卸载现有版本：npm uninstall ipfs-api
• 安装兼容版本：npm install ipfs-api@26.1.2 --save

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