2

スタンドアロン ライブラリとして機能する縮小ファイルで RequireJS を介して React + ReactDOM を使用しようとしています。

私はReactを使用できるようになりました（縮小されたファイルにバンドルされています）が、ReactDOMを使用しようとするとすべてが壊れます。これまでに見つかった考えられる原因は、「require-dom」をロードしようとしている間に縮小されたファイルからコードをロードする代わりに、ファイル「react-dom」をインポートします。（実際にはreact-domが含まれています）。

実際、必要なすべてのファイルをプリコンパイルするために grunt を使用しています。これが私のうなり声のrequirejs構成です：

requirejs: {
  build: {
    options: {
      baseUrl: './build/',
      paths: {
        'jquery': '../bower_components/jquery/dist/jquery.min',
        'react': '../bower_components/react/react.min',
        'react-dom': '../bower_components/react/react-dom.min'
      },
      include: ['main'],
      out: 'dist/library.min.js',
      optimize: 'uglify2'
    }
  }
}

Main.js は次のとおりです。

define(['jquery', 'react', 'react-dom'], function($, React, ReactDOM) {
  return {
    react: React,
    reactDOM: ReactDOM,
  }
});

上記の構成ですべてのコードをコンパイルした後、次のように html ファイルに含めます。

<html>
  <head>
    <script src="../bower_components/requirejs/require.js"></script>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

Index.js は、次のような requirejs ファイルです。

requirejs.config({
  baseUrl: 'src',
  paths: {
    mylib: 'lib/dist/library.min.js'
  }
});

require(['mylib'], function(mylib) {
  console.log(mylib);
});

上記のコードを実行したときに表示されるエラーは次のとおりです。

require.js:1958 GET file:///D:/code/example/user/src/src/react-dom.js net::ERR_FILE_NOT_FOUND
req.load @ require.js:1958
load @ require.js:1682load @ require.js:832
fetch @ require.js:822check @ require.js:854
enable @ require.js:1173
enable @ require.js:1554
(anonymous function) @ require.js:1158
(anonymous function) @ require.js:134
each @ require.js:59enable @ require.js:1110
init @ require.js:786(anonymous function) @ require.js:1457

require.js:168 Uncaught Error: Script error for "react-dom"(…)

react-dom を削除すると、すべてがスムーズに読み込まれます。

React をシムとしてインポートすると、react-dom がグローバルな React 変数を検出するなど、これまでにいくつかのことを試しましたが、どちらも機能しませんでした。

事前に感謝します。

更新: コード例を含む Github リポジトリ

更新 2: react-dom lib と縮小されたスクリプトでしばらくデバッグした後、縮小されたスクリプトで "define('react-dom')" の呼び出しの前にメイン メソッドが実行されることがわかったので、問題は解決しました。 「「react-dom」を定義するコードが適切に実行されるまでメインスクリプトを待機させる方法」として。

4

1 に答える 1