React +(Router) without webpack or browserify

柔情痞子 提交于 2019-12-30 18:42:07

问题


Is it possible to use react with ReactRouter, without using browserify or webpack. I am following the documentation from http://rackt.github.io/react-router they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot.

So is it possible to get reactrouter working with including compiled JS from a CDN like https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js, instead of bundle all requirements by myself ? If i try to make it work with a CDN, I get an error that Route is not defined. But it looks like it is exported in the cdn file.

I would like to compile my JSX/ES6 react components include the ReactRouter and react JS-files from a cdn and only bundle my components into a new js file.

Is this possible or is browserify and webpack the right way to setup the project ? (I looked at several github repos). I got some doubts because there is no installation guide on http://rackt.github.io/react-router/

like this pseudo html:

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

回答1:


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.




回答2:


One additional info I want to share is the possibility to use externals (https://webpack.github.io/docs/library-and-externals.html) in webpack config. I use it as following:

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

this results in a smaller bundle and you can use react from a CDN as asked in my question. This also decreases the buildtime with gulp.



来源:https://stackoverflow.com/questions/30427758/react-router-without-webpack-or-browserify

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!