Javascript module.exports "模块未定义"

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29652716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:44:01  来源:igfitidea点击:

module.exports "Module is not defined"

javascriptrequirejsreactjscommonjs

提问by joakimnorberg

So, I am using RequireJS and React, trying to load a third-party component, which has been installed with:

因此,我使用 RequireJS 和 React,尝试加载第三方组件,该组件已安装:

npm install react-autocomplete

The structure is here: https://github.com/rackt/react-autocomplete/tree/master/lib

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

Now, I have a main.js file, initiated when requireJS is loaded, that looks like this:

现在,我有一个 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");
 });

Now, it all loads OK, but the third require statement throws a "module is not defined", for the main.js file in the third-party component, which looks like this:

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

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

I've been reading about that this has to do with me trying to require a CommonJS-style module, but I can't figure out how to fix it on my own, as I'm new to this.

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

Does anyone have a clear example on how I could get around this?

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

回答by Louis

RequireJS cannot load CommonJS modules as-is. However, there is a minimal modification you can make to them to load them. You have to wrap them in a definecall like this:

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

define(function (require, exports, module) {

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

});

If you have a bunch of modules you need to convert, or if you are using a third-party library written in the CommonJS pattern and want to convert it as part of a build process, you can use r.jsto perform the conversion for you.

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

回答by Brandon Pugh

The problem is that requireJS doesn't support CommonJS modules only AMD. So if the third party library doesn't support AMD then you'll have to jump through some hoops to get it to work.

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

If you have the option I would suggest using browserifyor webpackfor module loading since those are the tools that the majority of the react community have chosen and practically all third-party react components are published on npm as CommonJS modules.

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