React nicht definiert, wenn mit Webpack installiert

Question

Ich versuche, React mit Webpack installieren. Es ist Teil eines Rails-Projekts. Ich folge this tutorial

Das Tutorial von app/assets/Javascripts Entfernen alles empfiehlt (die ich noch nicht getan haben - ich habe noch jquery, jquery_ujs und d3 in dort) mein Javascript in ein separates Verzeichnis setzen und dafür, dass meine 'Quelle', und dann App/Assets/Javascripts das 'Ziel' Verzeichnis in meiner Webpack-Konfiguration. Ich habe mein Quellverzeichnis app/frontend/javascripts entsprechend dem Tutorial benannt.

Hier ist, was meine webpack.config.js Datei wie folgt aussieht:

'use strict'; 

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = [{ 
    name: 'chartComponent', 
    entry: './app/frontend/javascripts/entry.js', 
    output: { 
    path: path.join(__dirname, 'app', 'assets', 'javascripts'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: [/\.jsx$/], 
     loaders: ["jsx-loader?insertPragma=React.DOM&harmony"], 
     } 
    ], 
    }, 
    resolve: { 
    extensions: ['.webpack.js', '.web.js', '.js', '.jsx'] 
    } 
}]; 

Ich bekenne, ich weiß nicht, was all diese Einstellungen zu tun, insbesondere die Einstellungen der Lader ", aber es ist mein Verständnis, dass die Einreise 'sollte auf den Einstiegspunkt für mein webpack-ed javascript zeigen, und' output 'sollte das Verzeichnis und den Dateinamen für das kompilierte Javascript angeben.

Ich habe die Datei 'app/frontend/javascripts/entry.js' als Einstiegspunkt angegeben. Die Datei sieht wie folgt aus:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Chart = require('react-d3-core').Chart; 
var LineChart = require('react-d3-basic').LineChart; 

Webpack läuft ok, und erzeugt die Datei 'app/assets/Javascripts/bundle.js', wie erwartet. Wenn ich die Bundle-Datei jedoch entweder in meine Rails-App oder in meinen Jasmine-Test einfüge, sind die globalen Variablen React, ReactDOM usw. nicht verfügbar. An der Konsole, Reaktion zuzugreifen versuchen, erhalte ich:

Uncaught ReferenceError: React is not defined

ich erfolgreich die globalen Variablen zugreifen können d3 und $ von d3.js und jquery.js eingerichtet sind, aber ich bin nicht die, durch webpack verwalten.

Ich denke, ich muss falsch liegen in der Erwartung, dass die in meiner Webpack-Eintragsdatei eingerichteten Variablen verfügbar sind. Darüber hinaus scheint es, als ob eine solche Variable innerhalb der enthaltenen Datei eingerichtet werden sollte, nicht von mir deklariert - genauso wie d3 und $ eingerichtet werden, ohne dass ich sie deklariere und ihren Wert setze. Aber wenn ich bundle.js ansehe, sehe ich var React = ..... (An mehr als einem Ort, den ich nicht bekomme, aber was auch immer). Also würde ich denken, dass die Variable zumindest definiert wäre.

Kurz gesagt, wie kann ich über meine App und Tests auf React (oder eine andere Bibliothek, die ich mit dem webpack habe) zugreifen? Jede Hilfe wird geschätzt!

Answer 1

Jede im ES2015-Modul definierte Variable ist nur in diesem Modul verfügbar. Dasselbe gilt für importierte Module - das Importmodul macht dieses Modul nicht global verfügbar. Wenn Sie wirklich verfügbar sein global müssen einige Modul variabel machen, müssen Sie es zu window Eigenschaft zuweisen:

var React = require('react'); 
window.React = React;