没有 webpack 或 browserify 的 React +(Router)答案

【问题标题】：React +(Router) without webpack or browserify没有 webpack 或 browserify 的 React +(Router)
【发布时间】：2015-08-06 07:26:14
【问题描述】：

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

那么是否有可能让 reactrouter 使用包含来自 CDN（如https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js）的编译 JS，而不是我自己捆绑所有需求？如果我尝试让它与 CDN 一起工作，我会收到一个错误，即 Route 未定义。但是貌似是导出到cdn文件里的。

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

这是可能的还是 browserify 和 webpack 是设置项目的正确方法？（我查看了几个 github 存储库）。我有些疑惑，因为http://rackt.github.io/react-router/上没有安装指南

喜欢这个伪html：

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

【问题讨论】：

标签： reactjs browserify webpack react-router

【解决方案1】：

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

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

这会产生更小的捆绑包，您可以按照我的问题中的要求使用来自 CDN 的响应。这也减少了 gulp 的构建时间。

【讨论】：

【解决方案2】：

当您使用 CDN 中的预构建版本时，库将导出到 window.ReactRouter。所以，Route 是在 window.ReactRouter.Route 上定义的。

由于 React Router 也依赖于 React，因此使用 CDN/浏览器构建还需要 React 在 window.React 上可用。

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

【讨论】：