将 Browserify 集成到 Cordova 的最佳方法答案

【问题标题】：Best way to integrate Browserify into Cordova将 Browserify 集成到 Cordova 的最佳方法
【发布时间】：2018-01-07 05:40:30
【问题描述】：

我试图将 Browserify 集成到 Cordova 中。我做了以下事情：

已安装 Browserify:
npm install -g browserify
将 index.js 移至根目录：
mv www/js/index.js .
创建了一个名为 appBeforeBuild.sh 的挂钩脚本，它将 index.js 转换为 bundle.js：
browserify index.js -o www/js/bundle.js
编辑 - 请在下面查看我的答案
更新了 config.xml 以运行挂钩：
<hook src="appBeforeBuild.sh" type="before_build" />
更新了 index.html 以包含 bundle.js 而不是 index.js：
<script type="text/javascript" src="js/bundle.js"></script>

这可能是一个很好的将 Browserify 集成到 Cordova 的指南，但是很遗憾它不起作用，因为编辑 'index.js' 不会触发重新编译。

谁能解释一下如何将 index.js 设置为一个文件检查构建依赖项并触发before_build钩子？

【问题讨论】：

标签： cordova browserify cordova-hooks

【解决方案1】：

我的问题中的检查列表对于将 Browserify 集成到 Cordova 中是很好的，但是应该更正 [before_build] 脚本。以下是适用于 Mac OSX 的脚本：

文件：appBeforeBuild.sh

echo "[before_build] Start"
b=$(stat -f "%Sm" -t "%Y%m%dT%H%M%S" index.js)
if [ -f timestamp_indexjs.txt ]; then
    a=$(cat timestamp_indexjs.txt)
    if [ $a == $b ]; then
        echo "- No change in index.js"
    else
        echo "- Calling Browserify (timestamp was changed)"
        echo $b>timestamp_indexjs.txt
        browserify index.js -o www/js/bundle.js
    fi
else
    echo "- Calling Browserify (First run, no timestamp)"
    echo $b>timestamp_indexjs.txt
    browserify index.js -o www/js/bundle.js
fi
echo "[before_build] End"

此文件必须被授予执行权限：

chmod +x appBeforeBuild.sh

此脚本中的想法是确保仅在 index.js 更改时才调用 Browserify。

提示：

将 timestamp_indexjs.txt 放入您的 .gitignore 文件中。
在调查 Cordova 问题时，使用-d 选项运行它，如cordova -d build android

【讨论】：