如何将Browserify集成到Cordova并触发自动编译？

我完全懂你遇到的痛点——你的Browserify集成步骤本身是正确的，但Cordova的before_build钩子只有在你手动执行cordova build、cordova run这类构建命令时才会触发，单纯修改根目录的index.js并不会自动触发钩子去重新生成bundle.js。下面给你几个实用的解决方案，帮你实现修改源文件后自动触发编译的需求：

方案1：用文件监听工具自动触发Browserify编译 #

最直接的方式是用文件监听工具（比如nodemon或者chokidar-cli），实时监控index.js的变化，一旦文件被修改就自动执行Browserify命令生成新的bundle.js。

步骤如下：

1. 全局安装nodemon：

   npm install -g nodemon
   

2. 在项目根目录的package.json里添加一个监听脚本：

   "scripts": {
     "watch:browserify": "nodemon --watch index.js --exec 'browserify index.js -o www/js/bundle.js'"
   }
   

3. 启动监听：

   npm run watch:browserify
   

之后你每次修改index.js，nodemon都会自动触发Browserify重新编译，生成最新的bundle.js。如果配合Cordova的热重载功能（比如cordova run --livereload），还能实现修改代码后自动刷新App，开发体验会顺畅很多。

方案2：修改钩子脚本，添加文件更新判断 #

如果你还是想依赖Cordova的before_build钩子，可以修改你的appBeforeBuild.sh脚本，让它自动判断index.js是否比bundle.js更新，只有当源文件更晚时才执行编译，避免不必要的重复操作。

修改后的appBeforeBuild.sh内容：

#!/bin/bash

# 检查index.js的修改时间是否晚于bundle.js
if [ index.js -nt www/js/bundle.js ]; then
  echo "index.js已更新，重新生成bundle.js..."
  browserify index.js -o www/js/bundle.js
else
  echo "bundle.js已是最新版本，无需重新编译"
fi

这样每次你执行cordova build或者cordova run时，脚本会自动检查是否需要重新编译，确保bundle.js始终是最新的。不过这个方案还是需要手动触发构建命令，适合不需要实时热重载的场景。

方案3：结合Cordova热重载插件实现全流程自动化 #

如果你想要开发时完全自动化，可以结合Cordova的热重载插件和文件监听工具：

1. 安装热重载插件：

   cordova plugin add cordova-plugin-livereload
   

2. 启动热重载模式运行App：

   cordova run android --livereload  # 或者ios
   

3. 同时启动nodemon监听index.js的变化（参考方案1的脚本）

这样修改index.js后，nodemon会自动生成新的bundle.js，热重载插件会检测到www/js/bundle.js的变化，自动刷新App，整个开发流程完全无需手动干预。

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