React +(路由器)没有webpack或browserify

时间:2015-05-24 20:00:37

标签: reactjs browserify webpack react-router

是否可以使用与ReactRouter的反应,而无需使用browserify或webpack。 我正在关注来自http://rackt.github.io/react-router的文档,他们需要react和react-router(require('react-router');)。如果我使用browerifly我生成的捆绑大约是1MB文件大小,这听起来很多。

因此可以让remtrouter使用来自像https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js这样的CDN编译JS,而不是自己捆绑所有需求吗?如果我尝试使其与CDN一起使用,我会收到一条未定义Route的错误。但它看起来像是在cdn文件中导出的。

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

这是可能的,还是浏览器和webpack正确设置项目的方法? (我看了几个github回购)。我有些疑惑,因为http://rackt.github.io/react-router/

上没有安装指南

喜欢这个伪html:

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

2 个答案:

答案 0 :(得分:2)

When you're using the prebuilt version from the CDN, the library is exported onto window.ReactRouter. So, Route is defined on window.ReactRouter.Route.

Since React Router also depends on React, using the CDN/browser build will also require that React is available on window.React.

That said, the CDN version you linked to is, itself, generated with webpack, so I don't expect that you'd gain any file size improvements. You might look into minification/dead code elimination on your browserify bundle to see if it decreases the file size.

答案 1 :(得分:2)

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

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

这导致一个较小的捆绑,你可以使用我的问题中提到的CDN的反应。这也会减少构建时间。