Question

我正在尝试通过RequireJS在一个缩小的文件中使用React + ReactDOM，该文件充当一个独立的库。

我已经到了能够使用React（在缩小文件中捆绑）的地步但是当我尝试使用ReactDOM时，一切都中断了，我发现到目前为止的可能原因是在尝试加载＆＃34; require时-dom＆＃34;要求尝试导入文件＆＃34; react-dom＆＃34;而不是从缩小的文件加载代码。（其中实际上包含react-dom）。

实际上我正在使用grunt来预编译所有需要的文件。这是我的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 var，但这两者都没有用。

任何帮助将不胜感激，提前感谢。

更新： Github repo with example code

更新2：经过一段时间对react-dom lib和缩小脚本进行调试后，我发现main方法在调用之前执行了＃34; define（＆＃39） ;反应-DOM＆＃39;）＆＃34;在缩小的脚本中，所以问题解开为＆＃34;如何使主脚本等到定义＆＃39; react-dom＆＃39;虽然已被执行＆＃34;。

Answer 1

似乎与新版本的React 15.4.1（昨天刚刚发布）一样，这个问题就解决了。更新bower.json中的版本后再试一次！

在一个缩小的文件中使用带有RequireJS的React-dom

1 个答案: