module.exports"模块未定义"

Question

所以,我正在使用RequireJS和React,尝试加载第三方组件,该组件已安装:

npm install react-autocomplete

结构在这里:https://github.com/rackt/react-autocomplete/tree/master/lib

现在,我有一个main.js文件,在加载requireJS时启动,如下所示:

require.config({
paths: {
      "react" : "react/react",
      "jsx-transformer" : "react/JSXTransformer",
      "react-autocomplete" : "node_modules/react-autocomplete/lib/main"
    }
});

require(["react"], function(react) {
    console.log("React loaded OK.");
});

require(["jsx-transformer"], function(jsx) {
    console.log("JSX transformer loaded OK.");
});

require(['react-autocomplete'], function (Autocomplete) {
    console.log("React autocomplete component loaded OK.");
    var Combobox = Autocomplete.Combobox;
    var ComboboxOption = Autocomplete.Option;
    console.log("Autocomplete initiated OK");
 });

现在,它都加载正常,但第三个require语句为第三方组件中的main.js文件抛出"模块未定义",如下所示:

module.exports = {
  Combobox: require('./combobox'),
  Option: require('./option')
};

我一直在阅读这与我试图要求一个CommonJS风格的模块有关,但我无法弄清楚如何自己修复它,因为我是新手.

有没有人有一个明确的例子,我怎么能解决这个问题？

Answer 1

RequireJS无法按原样加载CommonJS模块.但是,您可以对它们进行最小程度的修改以加载它们.你必须在这样的define调用中包装它们:

define(function (require, exports, module) {

  module.exports = {
    Combobox: require('./combobox'),
    Option: require('./option')
  };

});

如果您需要转换一堆模块,或者如果您使用的是以CommonJS模式编写的第三方库并希望将其转换为构建过程的一部分,则可以使用它r.js来执行转换.

Answer 2

问题是requireJS不支持只有AMD的CommonJS模块.因此,如果第三方库不支持AMD,那么你将不得不跳过一些环节来让它工作.

如果有我会建议使用该选项browserify或的WebPack的,因为这些模块加载是,大部分反应社会选择的工具和几乎所有的第三方反应组件在故宫作为CommonJS的模块发布.