javascript - Browserify 生成无法使用的bundle.js

标签 javascript reactjs browserify

我正在尝试让一个非常简单的 React 应用程序运行。我要require() React,所以我使用 browserify 来生成一个bundle.js:

browserify -t babelify libs.js -o bundle.js
browserify -t reactify app.jsx -o app.js

页面加载时,不显示 React 内容。在控制台上,它显示:ReferenceError:ReactDOM未定义

但是,当我替换<script src="bundle.js">时与

<script src="js/react-0.14.0.js"></script>
<script src="js/react-dom-0.14.0.js"></script>

一切正常。 我确信我错过了一些明显的东西。我希望能得到关于我做错了什么的提示。

helloworld.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="bundle.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script src="app.js"></script>
  </body>
</html>

app.jsx:

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

libs.js:

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

最佳答案

app.jsx 应该满足要求。

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

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

关于javascript - Browserify 生成无法使用的bundle.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33696912/

相关文章:

javascript - 超过 React-Redux 最大调用堆栈大小

reactjs - React Native图片上传

javascript - 模拟函数没有被 Jest 调用

javascript - Browserify 为模块分配相对路径而不是绝对路径

javascript - 为什么我不能在 node.js (browserify) 的 require() 函数中使用变量作为参数?

javascript - 我应该为我的 gulp 管道 `browserify` 所有文件然后 `concat` 它们吗?还是相反?

javascript - HTML Canvas 创建多个动画矩形

javascript - 添加到现有的旧幻灯片脚本以包含图像标题

javascript - 在 Boolean 原型(prototype)中创建自定义函数,以 Integer 返回自身值

javascript - 在 React 中,如何在 HTML 表格中显示来自 API 的数据?