2015-05-24 20 views
6

È possibile utilizzare reagire con ReactRouter, senza utilizzare browserify o webpack. Sto seguendo la documentazione dal http://rackt.github.io/react-router richiedono un router di reazione e risposta (require('react-router');). Se uso browerifly il mio pacchetto generato è di circa 1 MB di file, che sembra molto.React + (Router) senza pacchetto web o browserify

Quindi è possibile far funzionare il reactrouter includendo JS compilato da un CDN come https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js, invece di raggruppare tutti i requisiti da solo? Se provo a farlo funzionare con un CDN, ottengo un errore che Route non è definito. Ma sembra che venga esportato nel file cdn.

Vorrei compilare i miei componenti di reazione JSX/ES6 includono ReactRouter e reagire file JS da un cdn e raggruppare solo i miei componenti in un nuovo file js.

È possibile o è browserify e webpack il modo giusto per impostare il progetto? (Ho guardato diversi repository Github). Ho avuto qualche dubbio, perché non v'è alcuna guida all'installazione http://rackt.github.io/react-router/

come questo pseudo html:

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

risposta

2

Quando si utilizza la versione precostruito dal CDN, la libreria viene esportato sul window.ReactRouter. Quindi, Route è definito su window.ReactRouter.Route.

Poiché React Router dipende anche da React, l'uso del CDN/del browser richiede anche che lo sia disponibile su window.React.

Detto questo, la versione CDN a cui si è collegati è di per sé generata con il webpack, quindi non mi aspetto che si possano ottenere miglioramenti delle dimensioni dei file. Potresti esaminare l'eliminazione di minification/dead code sul bundle di browserify per vedere se diminuisce la dimensione del file.

2

Una informazione aggiuntiva che desidero condividere è la possibilità di utilizzare gli esterni (https://webpack.github.io/docs/library-and-externals.html) nella configurazione di Webpack. Io lo uso come segue:

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

questo si traduce in un fascio più piccolo ed è possibile utilizzare reagiscono da una CDN come chiesto nella mia interrogazione. Questo diminuisce anche il tempo di costruzione con il sorso.