Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React +(Router) without webpack or browserify

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>
like image 493
svenhornberg Avatar asked May 24 '15 20:05

svenhornberg


2 Answers

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.

like image 182
Michelle Tilley Avatar answered Oct 03 '22 23:10

Michelle Tilley


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.

like image 37
svenhornberg Avatar answered Oct 03 '22 23:10

svenhornberg