如何在Rails 5应用的Webpacker环境中使用浏览器端Prettier Standalone

你本地开发正常但生产构建失败的核心原因是引入了默认的Node.js版本Prettier，该版本包含大量Node专属API调用，Rails Webpacker生产环境构建时会严格检查依赖完整性，检测到浏览器环境不存在的Node内置模块就会抛出错误，按以下步骤修改即可解决：

步骤1：修正Prettier导入路径 #

将原来的普通导入替换为浏览器专用的Standalone版本导入，避免引入Node专属逻辑：

// 错误导入（默认引入Node端版本）
// import prettier from 'prettier';

// 正确导入（浏览器专用Standalone版本）
import prettier from 'prettier/standalone';
import parserCss from 'prettier/parser-postcss';

// 原有格式化逻辑保持不变
prettier.format(".foo{color: red;}", {
  parser: "css",
  plugins: [parserCss],
});

步骤2：配置Webpacker忽略Node内置模块 #

修改Rails Webpacker配置文件 config/webpack/environment.js，新增配置告诉Webpack将Prettier依赖的Node内置模块标记为空，避免构建报错：

const { environment } = require('@rails/webpacker')

// 新增以下配置
environment.config.set('node', {
  fs: 'empty',
  path: 'empty',
  module: 'empty',
  os: 'empty',
  crypto: 'empty'
})

module.exports = environment

步骤3：本地验证生产构建 #

修改完成后在项目根目录执行以下命令，提前验证生产环境构建是否正常，无需部署到服务器再排查：
RAILS_ENV=production bin/webpack
如果执行完成没有报错，说明配置生效，后续部署就不会出现构建失败问题。

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