调整postinstall脚本后Heroku构建失败，请求技术排查

从你的构建日志里能定位到两个核心问题，我们一步步来解决：

1. ./manifest 文件缺失导致的模块找不到错误 #

日志里明确提示：

ERROR in ./src/assetLoader.js
Module not found: Error: Can't resolve './manifest' in '/tmp/build_xxx/src'

看你的package.json脚本配置，build命令是先执行generateManifest生成manifest文件，再运行webpack打包，但你的postinstall脚本直接跳过了manifest生成步骤，直接执行webpack。这就导致Heroku构建时，manifest文件根本没被创建，自然会出现找不到的错误。

修复方法：
修改package.json里的postinstall脚本，先执行manifest生成命令，再执行webpack：

"postinstall": "node manifestGenerator.js && webpack -p --config ./webpack.config.js --progress"

2. UglifyJs 无法处理 ES6+ 语法的错误 #

第二个关键错误：

ERROR in proj.js from UglifyJs
Unexpected token: name (Creature) [GithubUsername-projName.js:1,99245]

这个错误说明你的代码里包含ES6+语法（比如class Creature这类类声明），但你使用的uglifyjs-webpack-plugin@1.1.2默认只能处理ES5语法，所以解析失败。另外我还发现你的webpack配置里存在一个逻辑错误：

module.exports = merge(baseSettings, production ? devSettings : prodSettings);

这里的判断完全搞反了！当production为true时，你合并的是开发环境的devSettings（带source map），反而开发环境会使用生产的prodSettings（压缩插件），这会导致生产构建的配置完全不符合预期，必须修正为：

module.exports = merge(baseSettings, production ? prodSettings : devSettings);

针对Uglify的语法问题，有两个可行的解决方案：

方案A：使用支持ES6+的Terser压缩插件（推荐） #

uglifyjs-webpack-plugin后续版本已经替换为Terser作为底层压缩引擎，Terser天然支持ES6+语法，不需要额外转译。

• 安装依赖：

npm install terser-webpack-plugin --save-dev

• 修改webpack.config.js，替换原有的UglifyJSPlugin：

// 替换原来的UglifyJSPlugin引入
const TerserPlugin = require('terser-webpack-plugin');

// 在prodSettings的plugins数组里替换为：
new TerserPlugin(),

方案B：添加Babel转译ES6到ES5 #

如果你想继续使用UglifyJSPlugin，可以通过Babel把代码转译为ES5：

• 安装Babel相关依赖：

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

• 在webpack的module.rules里添加Babel转译规则：

module: {
  rules: [
    // 新增Babel转译规则
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
    // 保留原来的less、css、file-loader规则...
  ]
}

最后验证步骤 #

1. 将上述修改提交到你的PR分支
2. 重新触发Heroku构建，这两个核心错误应该就能解决了

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