module.exports "module未定义"

IT技术 javascript requirejs reactjs commonjs
2021-04-15 13:21:42

因此,我正在使用 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");
 });

现在,一切都加载好了,但是对于第三方组件中的 main.js 文件,第三个 require 语句抛出一个“module未定义”,如下所示:

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

我一直在读到这与我试图需要一个 CommonJS 风格的module有关,但我不知道如何自己修复它,因为我是新手。

有没有人有一个关于我如何解决这个问题的明确例子?

2个回答

RequireJS 不能按原样加载 CommonJS module。但是,您可以对它们进行最小的修改以加载它们。您必须将它们包装在这样的define调用中:

define(function (require, exports, module) {

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

});

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

是的,猜猜问题是我会在第三方组件中摆弄。不过谢谢!
2021-06-05 13:21:42

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

如果可以选择,我建议使用browserify的WebPack因为这些都是大多数人的react社会选择的工具和几乎所有的第三方react的组分的NPM为CommonJS的module公布module加载。