Browserify打包含JSON的JS文件时出现SyntaxError报错排查

• 编写Python脚本读取.txt文件并输出JSON文件，经linter校验确认JSON格式准确
• 终端执行打包命令，将JSON内容与directory.js文件结合，经reactify转换后输出bundle.js，执行命令如下：
  browserify -g reactify ./directory.js -o ./bundle.js
• 生成的bundle.js存放于Node.js服务的静态资源目录，访问localhost时控制台抛出解析错误：
  Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data
• 调整Python脚本配置时，报错会变更为unexpected s found at line...、unexpected : found等不同提示，初步怀疑打包环节browserify或reactify对引入的JSON内容做了意外修改，需要排查方向与解决方案。

• 检查JSON引入方式与解析逻辑：browserify原生支持require()引入JSON文件，会自动将JSON内容解析为JS对象，如果代码中对已经解析完成的JS对象再次调用JSON.parse()，JS会先将对象转为[object Object]字符串再执行解析，触发位置匹配的解析错误
• 检查reactify的文件匹配规则：reactify是已停止维护的老旧JSX转换工具，若配置中未正确过滤.json后缀文件，会将JSON内容当做JSX源码解析，把JSON的双引号替换为单引号、将花括号识别为JSX标签边界，直接破坏JSON结构，对应出现单引号、冒号、普通字符的解析报错
• 直接校验打包产物内容：打开生成的bundle.js，搜索JSON中的特征字段，查看对应片段的原始内容是否被修改，比如双引号是否被转义/替换为单引号、是否被插入了reactify生成的额外转换代码、是否存在多余的BOM头或不可见字符
• 检查Python生成JSON的嵌入逻辑：如果不是通过静态文件引入JSON，而是通过脚本读取JSON字符串嵌入JS代码，确认读取时指定了正确的utf-8编码，没有出现字符串转义错误、多余拼接字符的问题。

• 替换老旧构建链路：reactify早已停止维护，将JSX转换工具替换为babelify，搭配@babel/preset-env、@babel/preset-react使用，babelify默认会正确识别JSON文件类型，不会将JSON内容当做JSX解析，调整后的打包命令参考：
  browserify -g [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] ./directory.js -o ./bundle.js
• 临时规避文件识别问题：如果暂时不调整构建工具，可将JSON内容写入JS文件，通过module.exports = { /* 原始JSON内容 */ }的形式导出，避免reactify将内容识别为JSON/纯文本做错误转换
• 修正JSON.parse调用逻辑：如果是重复解析导致的错误，直接使用require()引入后返回的JS对象即可，不需要额外调用JSON.parse()
• 增加打包后校验步骤：每次构建完成后，抽查bundle.js中嵌入的JSON片段，确认双引号未被替换、结构完整，再部署到静态资源目录。

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