在最小文件中使用React-dom和RequireJS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在最小文件中使用React-dom和RequireJS相关的知识,希望对你有一定的参考价值。

我正在尝试通过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 var,但这两种方法都不起作用。

任何帮助将不胜感激,在此先感谢。

更新: 带有示例代码的Github存储库

更新2:在对react-dom lib和缩小的脚本进行了一段时间的调试之后,我发现main方法在缩小的脚本中调用“ define('react-dom')”之前就已执行,因此问题得以解决。如“如何使主脚本等到定义'react-dom'的代码正常执行”。

答案

好像使用新版本的React 15.4.1(昨天才发布)一样,此问题得以解决。 更新您的bower.json中的版本后重试!

以上是关于在最小文件中使用React-dom和RequireJS的主要内容,如果未能解决你的问题,请参考以下文章

如何在服务器端做出反应来渲染图像?

react-redux进阶

webpack中DllPlugin用法

react通过父组件渲染子组件中的内容

React的使用

02react 之 jsx