web-dev-qa-db-ja.com

module.exports「モジュールが定義されていません」

だから、私はRequireJSとReactを使用して、サードパーティのコンポーネントをロードしようとしています。

npm install react-autocomplete

構造は次のとおりです。 https://github.com/rackt/react-autocomplete/tree/master/lib

これで、requireJSが読み込まれたときに開始されるmain.jsファイルが次のようになりました。

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");
 });

これで、すべて正常にロードされますが、3番目のrequireステートメントは、サードパーティコンポーネントのmain.jsファイルに対して、次のように「モジュールが定義されていません」をスローします。

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

私はこれがCommonJSスタイルのモジュールを要求しようとしていることに関係していることを読んでいますが、私はこれが初めてなので、自分で修正する方法がわかりません。

誰も私がこれを回避する方法について明確な例を持っていますか？

javascriptrequirejsreactjscommonjs
23
joakimnorberg

RequireJSは、CommonJSモジュールをそのままロードできません。ただし、それらをロードするために行うことができる最小限の変更があります。次のようにdefine呼び出しでラップする必要があります。

define(function (require, exports, module) {

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

});

変換する必要のあるモジュールがたくさんある場合、またはCommonJSパターンで記述されたサードパーティライブラリを使用していて、ビルドプロセスの一部として変換する場合は、 r.js 変換を実行します。

28
Louis

問題は、requireJSはAMDのみCommonJSモジュールをサポートしていないことです。そのため、サードパーティのライブラリがAMDをサポートしていない場合、それを機能させるためにいくつかの問題を乗り越える必要があります。

オプションがある場合は、モジュールのロードに browserify または webpack を使用することをお勧めしますコンポーネントは、CommonJSモジュールとしてnpmで公開されます。

6
Brandon Pugh