2016-01-14 95 views
1

我正在使用Webpack捆綁一些以JSX格式編寫的React代碼。編譯完成後,我已經完成並運行了所有內容,並且看起來好像bundle.js輸出文件中的所有內容都是正確的。當我將它導入HTML文件並嘗試顯示React代碼時,由於某種原因它不顯示。我製作了一個常規的JavaScript文件,並將其包含在main.js中,以便它也包含在Webpack輸出文件bundle.js中,並且這在瀏覽器中顯示。所以當我的html文件中使用bundle.js時,我只是得到文本「Hello,im位於一個單獨的文件中」而不是React元素。在瀏覽器中未顯示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文件IM在

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

我認爲你的第一個代碼塊被切斷了;修理它? –

+0

對不起,它已被更正。 –

+0

爲什麼要調用'React.render'和'ReactDOM.render'?控制檯中是否有錯誤?是否有這些進口(我沒有在你的代碼中看到它們)? 'mountNode'在哪裏定義? –

回答

2

React homepage的例子是不能自給自足,反倒是最小的例子陣營本身。下面是你使用的例子如下,首先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並將我們的源代碼包打包,我們可以使用這個基本配置的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' ], 
     } 
    ], 
    }, 
}; 
+0

謝謝,這工作/幫助。 –

0

你要麼需要把這個腳本標籤在身體的結束,或者在文件準備執行代碼。當該腳本在運行的頭,心不是使用id =應用一個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> 
+0

有效的點,但它仍然無法正常工作。 –

+0

@After_Sunset一定要檢查div id,並確保它與您的代碼完全匹配。 –

+0

@bebraw感謝您的建議,同時嘗試調試這是一個問題。自那以後,我想出了幾個問題,並會寫出詳細的答案。 –

相關問題