为什么这个 RequireJS shim 不适用于 react-router

Question

我正在尝试通过 require 将 react 和 react-router 加载到我的应用程序中。我必须遵循 shim 设置，但我仍然收到一个错误，即 react-router 没有获得正确的 React 对象。

  paths:   {
    domReady:       '../lib/requirejs-domready/domReady',
    react:          '../lib/react/react',
    'react-router': '../lib/react-router/dist/react-router'
  },
  shim:    {
    'react':        {
      exports: 'React'
    },
    'react-router': {
      deps:    ['react'],
      exports: 'ReactRouter'
    }
  }

  require(['domReady!', 'react', 'react-router'], ...


Uncaught TypeError: Cannot read property 'createClass' of undefined react-router.js:372
../utils/withoutProperties react-router.js:1
s react-router.js:1
(anonymous function) react-router.js:62
./Route react-router.js:1
s react-router.js:1
(anonymous function) react-router.js:886
./actions/LocationActions react-router.js:1
s react-router.js:1
e react-router.js:1
(anonymous function) require.js:1658
context.execCb require.js:874
Module.check require.js:1151
Module.enable require.js:782
Module.init require.js:1178
callGetModule require.js:1552
context.completeLoad require.js:1679
context.onScriptLoad

所有东西都是通过 Bower 安装的。 React 是 0.11.1，路由器是 0.7.0

Answer 1

源码中显示 react-router 只有在设置了 window.React 或 global.React 时才能工作。 React 本身不会在 RequireJS 环境中暴露 global 对象。所以我最终写了一个垫片。

paths:   {
  domReady:       '../lib/requirejs-domready/domReady',
  react:          '../lib/react/react',
  'react-router': '../lib/react-router/dist/react-router',
  'react-router-shim': 'react-router-shim'
},
shim:    {
  'react-router-shim': {
    exports: 'React'
  },
  'react-router': {
    deps:    ['react-router-shim'],
    exports: 'ReactRouter'
  }
}

反应路由器垫片：

define(['react'], function(React) {
  "use strict";

  window.React = React;
});

然后我可以使用 react 和 react-router 作为正确的依赖项。