首页 文章

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

提问于
浏览
6

是否可以使用与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 回答

  • 2

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

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

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

  • 2

    当您使用CDN中的预构建版本时,库将导出到 window.ReactRouter . 因此, Routewindow.ReactRouter.Route 上定义 .

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

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

相关问题