有条件地要求commonJS AMD模块中的代码

Question

我正在尝试为Firefox和Chrome编写跨浏览器扩展程序。 Firefox使用commonJS规范，而Chrome只是将所有内容都集成到全局命名空间中，就像网页一样。

为了能够编写可重用的代码，我试图在Chrome扩展中使用requireJS来代码，这样我就可以编写commonJS模块并让它们在两种环境中都能正常工作。

当我需要有条件地需要模块时，我遇到了问题。例如，Firefox提供对simple-storage模块的访问权限，您应该使用该模块来访问本地存储。在chrome中，我需要使用它们提供的localStorage API。所以，我一直在尝试这样做：

// storage.js
define(function(require, exports, module){
  var store;      

  try {
    // This module will only be available in the FF extension.
    store = require('simple-storage').storage
  } catch(error) {
    // If it's not available, we must be in Chrome and we
    // should use the localStorage object.
    store = localStorage
  }

  // Use the store object down here.
});

然而，这似乎不起作用。当我尝试加载Chrome扩展程序时，出现以下错误：

是否有更好的方法来要求具有后备的模块？

Answer 1

这里有两点需要注意：

1）检测镀铬是否正在运行

// detects webKit (chrome, safari, etc..)
var isChrome = 'webKitTransform' in document.documentElement.style

2）Requirejs将解析define()函数并搜索require('module')个调用。为了防止chrome上的错误，您已经以某种方式编写require，当requirejs解析函数体时，它不会将调用识别为模块依赖项：

if (isChrome)
   // use localStorage
else {
   // set the module name in a var does the trick,
   // so requirejs will not try to load this module on chrome.
   var ffStorageModule = 'simple-storage';
   return require(ffStorageModule);
}