没有 webpack 或 browserify 的 React +(Router)
Posted
技术标签:
【中文标题】没有 webpack 或 browserify 的 React +(Router)【英文标题】：React +(Router) without webpack or browserify 【发布时间】：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>
【问题讨论】：
【参考方案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 包中查看缩小/死代码消除，看看它是否会减小文件大小。
【讨论】：
以上是关于没有 webpack 或 browserify 的 React +(Router)的主要内容，如果未能解决你的问题，请参考以下文章
我应该使用 Browserify 还是 Webpack 来延迟加载 Angular 1.x 中的依赖项 [关闭]
什么是 CommonJS、AMD、WebPack、Browserify 等？
任务运行程序（Gulp、Grunt 等）和捆绑程序（Webpack、Browserify）。为啥要一起使用？