2015-05-24 6 views
6

Ist es möglich, mit ReactRouter zu reagieren, ohne browserify oder webpack zu verwenden. Ich befolge die Dokumentation von http://rackt.github.io/react-router sie erfordern reagieren und reagieren-Router (require('react-router');). Wenn ich brownifly verwende, ist mein generiertes Bundle ca. 1MB Dateigröße, was nach viel klingt.React + (Router) ohne Webpack oder browserify

So ist es möglich, reactrouter arbeiten mit einschließlich kompilierte JS von einem CDN wie https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js, anstatt alle Anforderungen selbst zu bündeln? Wenn ich versuche, es mit einem CDN arbeiten zu lassen, bekomme ich einen Fehler, dass Route nicht definiert ist. Aber es sieht so aus, als ob es in die CDN-Datei exportiert wird.

Ich möchte meine JSX/ES6-react-Komponenten einschließlich der ReactRouter und reagieren JS-Dateien von einer CDN und nur meine Komponenten in eine neue js-Datei zu kompilieren.

Ist dies möglich oder ist browserify und webpack der richtige Weg, um das Projekt einzurichten? (Ich schaute auf mehrere Github Repos). Ich habe einige Zweifel, weil es auf http://rackt.github.io/react-router/

wie diese Pseudo-HTML keine Installationsanleitung ist:

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

Antwort

2

Wenn Sie die vorkompilierte Version vom CDN verwenden, wird die Bibliothek auf window.ReactRouter exportiert. So ist Route auf window.ReactRouter.Route definiert.

Da der React Router auch von React abhängig ist, erfordert die Verwendung des CDN/Browser-Builds auch, dass React unter window.React verfügbar ist.

Das heißt, die CDN-Version, mit der Sie verlinkt haben, wird selbst mit webpack generiert, also erwarte ich nicht, dass Sie irgendwelche Dateigrößenverbesserungen bekommen würden. Sie können in Ihrem browserify-Bundle nach der Eliminierung von Minimierung/toten Code suchen, um zu sehen, ob die Dateigröße verringert wird.

2

Eine zusätzliche Information, die ich teilen möchte, ist die Möglichkeit, externe Dateien (https://webpack.github.io/docs/library-and-externals.html) in der Webpack-Konfiguration zu verwenden. Ich benutze es, wie folgend:

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

diese in einem kleineren Bündel führt und Sie können reagieren von einem CDN verwenden, wie in meiner Frage gestellt. Dies verringert auch die Aufbauzeit mit Schluck.