我正在使用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>
我認爲你的第一個代碼塊被切斷了;修理它? –
對不起,它已被更正。 –
爲什麼要調用'React.render'和'ReactDOM.render'?控制檯中是否有錯誤?是否有這些進口(我沒有在你的代碼中看到它們)? 'mountNode'在哪裏定義? –