All geek questions in one place

React + (Router) without web package or browser

Is it possible to use a reaction with ReactRouter without using a browser or webpack. I follow the documentation from http://rackt.imtqy.com/react-router for which I need to react and react to the router ( require('react-router'); ). If I use browerifly, my generated package is about 1 MB in size, which is very similar to.

So, is it possible to get the reactor to work by including compiled JS from the CDN, for example https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js , instead of linking all the requirements yourself? If I try to get it to work with CDN, I get a message that Route is undefined. But it looks like it is being exported to a cdn file.

I would like to compile the components responsible for JSX / ES6, including ReactRouter and edit the JS files from cdn and only link my components with the new js file.

Is this possible, or is the browser and webpack the right way to set up a project? (I looked at several github repositories). I have some doubts because there is no installation guide http://rackt.imtqy.com/react-router/

like this pseudo html:

 <head> CND :include react, react-router my code combinded.js </head>
+6
source share
2 answers

When you use the pre-created version from the CDN, the library is exported to window.ReactRouter . So, Route is defined on window.ReactRouter.Route .

Since React Router also depends on React, using a CDN / browser assembly will also require React be available on window.React .

However, the CDN version that you are associated with is itself generated using webpack, so I do not expect you to improve the file size. You can examine the minification / dead code exception in your browning package to see if the file size is reduced.

+2
source

Another information I want to share is the ability to use external ( https://webpack.imtqy.com/docs/library-and-externals.html ) in the webpack configuration. I use it like:

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

this leads to less stratification, and you can use the reaction with the CDN as asked in my question. It also reduces build time with gulp.

+2
source

Source: https://habr.com/ru/post/987831/

More articles:


All Articles