可选地尝试根据环境加载 <script>

Question

我有一个网站应用程序，Chrome 扩展程序和 PhoneGap / Cordova Android 应用程序都基于相同的代码库。

我希望浏览器仅在我的应用程序被包装为 PhoneGap 应用程序时尝试获取 <script src="cordova.js"></script>，这样它就不会在网站和扩展程序的控制台中显示 404，但是我我不确定如何在 HTML 中围绕 <script> 标记指定条件，或者我将如何检测环境。

我可以使用 if !!window.cordova 检查我是否处于 PhoneGap 环境中，但是我认为在包含 cordova.js 脚本之前我无法访问它。所以这是先有鸡还是先有蛋的情况。

Answer 1

模块加载器将为您完成此类工作。展望未来，我建议为此目的使用 SystemJS，因为它是一个现代模块加载器，支持 ES6 的所有出色功能，如果您喜欢那种东西的话。

另一种选择是 RequireJS，它有一个名为 Almond 的轻量级替代品，它可能更适合您的要求，因为它很小而且您只需要它来加载单个模块。您可能希望从 RequireJS 开始，然后在一切正常时将其替换为 Almond。

使用 RequireJS/Almond 语法，您的条件脚本加载器看起来像这样。请注意，由于脚本是异步加载的，因此需要在脚本加载后触发的 require() 回调中执行使用脚本的代码：

if (window.shouldLoadCordovaScript) {
    // Requiring 'cordova' fetches ./cordova.js
    require(['cordova'], function (cordova) {
        // code that uses cordova
    });
}

如果 Cordova 脚本不能正确支持异步模块加载，或者它支持 CommonJS 环境但不支持 AMD 等，您可能仍然运行遇到一些障碍，在这种情况下，您将需要使用 AMD 包装器预先捆绑一个版本，或者 "shim" 它（参见 RequireJS 文档），这可能会有点混乱。

可选地尝试根据环境加载 <script>

Optionally try to load <script> based on environment

javascript

cordova

phonegap-build