没有 webpack 或 browserify 的 React +(Router)

Question

是否可以在不使用 browserify 或 webpack 的情况下与 ReactRouter 一起使用 React。我正在关注 http://rackt.github.io/react-router 的文档，他们需要 react 和 react-router (require('react-router');)。如果我使用 browerifly，我生成的包大约有 1MB 文件大小，这听起来很多。

那么是否有可能让 reactrouter 使用像 https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js 这样的 CDN 编译的 JS，而不是自己捆绑所有需求？如果我尝试让它与 CDN 一起工作，我会收到一条错误消息，指出 Route is not defined。但是在cdn文件里好像是导出的

我想编译我的 JSX/ES6 反应组件，包括 ReactRouter 和来自 cdn 的反应 JS 文件，并且只将我的组件捆绑到一个新的 js 文件中。

这是可能的还是 browserify 和 webpack 是设置项目的正确方法？（我看了几个 github 回购协议）。我有点怀疑，因为 http://rackt.github.io/react-router/

上没有安装指南

喜欢这个伪html:

<head>
    CND :include react, react-router
    my code combinded.js
</head>

Answer 1

当您使用来自 CDN 的预构建版本时，库会导出到 window.ReactRouter。因此，Route 是在 window.ReactRouter.Route.

上定义的

由于 React Router 也依赖于 React，使用 CDN/browser 构建还需要 React 在 window.React 上可用。

也就是说，您链接到的 CDN 版本本身是使用 webpack 生成的，因此我不希望您获得任何文件大小改进。您可能会查看 minification/dead browserify 包上的代码消除，看看它是否会减小文件大小。

Answer 2

我想分享的一个附加信息是在 webpack 配置中使用外部组件 (https://webpack.github.io/docs/library-and-externals.html) 的可能性。我按如下方式使用它：

externals: {
  "react": "React",
  "react/addons": "React",
  "reflux" : "Reflux"
}

这会产生一个更小的包，您可以按照我的问题中的要求使用来自 CDN 的 React。这也减少了 gulp.

的构建时间

没有 webpack 或 browserify 的 React +(Router)

React +(Router) without webpack or browserify

browserify

reactjs

webpack

react-router