module.exports "模块未定义"答案

【问题标题】：module.exports "Module is not defined"module.exports "模块未定义"
【发布时间】：2015-06-21 13:27:39
【问题描述】：

所以，我正在使用 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 样式的模块有关，但我不知道如何自己修复它，因为我是新手。

有没有人有一个明确的例子来说明我如何解决这个问题？

【问题讨论】：

标签： javascript requirejs reactjs commonjs

【解决方案1】：

RequireJS 无法按原样加载 CommonJS 模块。但是，您可以对它们进行最小的修改以加载它们。您必须将它们包装在 define 调用中，如下所示：

define(function (require, exports, module) {

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

});

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

【讨论】：

对，我猜问题是我会摆弄第三方组件。不过谢谢！

【解决方案2】：

问题是 requireJS 不支持仅 AMD 的 CommonJS 模块。因此，如果第三方库不支持 AMD，那么您将不得不跳过一些障碍才能使其正常工作。

如果你有选项，我建议使用 browserify 或 webpack 进行模块加载，因为这些是大多数 React 社区选择的工具，并且几乎所有第三方 React 组件都作为 CommonJS 在 npm 上发布模块。

【讨论】：