Question

我正在使用Webpack捆绑一些用JSX格式编写的React代码。在编译过程中，我已经完成了所有工作，并且在bundle.js输出文件中看起来好像每件事都是正确的。当我将其导入HTML文件并尝试显示React代码时，它不会出于某种原因显示。我已经制作了一个常规的javascript文件并将其包含在main.js中，因此它也包含在Webpack输出文件bundle.js中，并且确实显示在浏览器中。因此，当我的html文件中使用bundle.js时，我只得到文本＆＃34;您好，我位于一个单独的文件中＃34;而不是React元素。

反应代码（main.js）

require('./extra.js');

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

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

常规JS文件（extra.js）

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

运行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文件即时使用

中的脚本

<!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>

Answer 1

React homepage上的示例不是自给自足的，而是React本身的最小示例。以下是您使用的示例的外观，从index.js开始：

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

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var mountNode = document.getElementById( 'app' );
ReactDOM.render(<HelloMessage name="John" />, mountNode);

您的index.html：

<html>
  <body>
    <div id="app"></div>
    <script src="./build/bundle.js"></script>
  </body>
</html>

请注意，它需要一个名为bundle.js的脚本，我们的源名为index.js。要转换JSX并将我们的源打包到bundle中，我们可以使用Webpack和这个基本配置：

var webpack = require( 'webpack' );

module.exports = {
  context: __dirname + '/src',
  entry: './index.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loaders: [ 'babel-loader?presets[]=react' ],
      }
    ],
  },
};

Answer 2

您需要将该脚本标记放在正文的末尾，或者在文档就绪时执行代码。当该脚本在头部运行时，文件上没有id = app的div

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

  <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

反应代码未在浏览器中显示

2 个答案: