Reagieren-code nicht angezeigt im browser

Ich bin mit Webpack zu bündeln, einige Reagieren geschriebenen code in JSX-format. Ich habe alles eingerichtet und läuft soweit kompilieren geht und wie es aussieht, wenn alles richtig ist in der bundle.js Ausgabe-Datei. Wenn ich importieren Sie es in eine HTML-Datei und versuchen Sie auf die Anzeige Reagieren-code es nicht zeigen, bis aus irgendeinem Grund. Ich habe ein regulärer javascript-Datei enthalten und es in die main.js so, dass es auch in der Webpack-Ausgabe-Datei bundle.js - und dies zeigen, nicht im browser. Also, wenn die bundle.js verwendet wird in meiner html-Datei bekomme ich nur den text "Hello, im befindet sich in einer separaten Datei" und nicht die Elemente Reagieren.

Reagieren-Code(main.js)

require('./extra.js');

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

Regelmäßige JS-Datei(extra.js)

document.write("Hello, im located in a seperate file");

Output-Datei nach dem ausführen webpack(bundle.js)

/******/ (function(modules) { //webpackBootstrap
/******/    //The module cache
/******/    var installedModules = {};

/******/    //The require function
/******/    function __webpack_require__(moduleId) {

/******/        //Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        //Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        //Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        //Flag the module as loaded
/******/        module.loaded = true;

/******/        //Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    //expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    //expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    //__webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    //Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);

    React.render(React.createElement(
        "h1",
        null,
        "hello world"
    ), document.getElementById("app"));

    var HelloMessage = React.createClass({
        displayName: "HelloMessage",

        render: function () {
            return React.createElement(
                "div",
                null,
                "Hello ",
                this.props.name
            );
        }
    });
    ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

/***/ },
/* 1 */
/***/ function(module, exports) {

    /**
     * Created by sf on 1/14/2016.
     */

    document.write("Hello, im located in a seperate file");

/***/ }
/******/ ]);

HTML-Datei, die im mit Sie das Skript in

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="example"></div>

<script src="bundle.js" type="text/javascript"></script>
</body>
</html>
  • Ich denke, dass der erste code-block ist abgeschnitten; Geist beheben?
  • Tut mir Leid, dass es korrigiert wurde.
  • Warum gibt es Aufrufe an React.render und ReactDOM.render? Gibt es irgendwelche Fehler in der Konsole? Gibt es Einfuhren für diese beiden (ich weiß nicht sehen Sie in Ihrem code)? Wo ist mountNode definiert?
  • Sie waren nur zwei Beispiele, die ich zog die Reagieren homepage ich habe es vereinfacht. Es gibt keine Fehler, nirgendwo.
  • Wenn Sie schauen in Richtung der Unterseite des bundle.js - Datei neben __webpack__require__ es hat (1) daneben. Bedeutet das, dass es fehlt, ist eine Anforderung möglich?
  • Bitte zeigen Sie die gesamte main.js. Ich bin nicht zu sehen, jegliche Einfuhr und es kann nicht funktionieren, ohne Importe. Und auf jeden Fall nutzen ReactDOM.render.
  • Ich nehme an, erforderlich ist äquivalent zu importieren. Ich habe aktualisiert, mit Ihrem Vorschlag, und ich habe versucht, mit Hilfe bedürfen je zuvor Reagieren die Webseiten Abschnitt erste Schritte immer noch nicht funktioniert hat, dies ist meine gesamte main-Datei.
  • Lassen Sie uns weiterhin diese Diskussion im chat.

InformationsquelleAutor After_Sunset | 2016-01-14
Schreibe einen Kommentar