使用 browserify 创建反应应用程序有错误

Posted 2023-02-22

【中文标题】使用 browserify 创建反应应用程序有错误

【英文标题】：Create react app with browserify has error

【发布时间】：2016-08-08 06:37:11

【问题描述】：

我正在学习 React 并尝试创建一个简单的 React 应用程序。 我想使用 ES2015 模块和一些 ES6 功能，所以我通过 npm 安装了 Babel 和 browserify。

这些是我安装的节点模块：

巴别塔 babel-preset-es2015 babel-preset-react babelify 浏览 一饮而尽 反应 乙烯基缓冲液 乙烯基源流 反应 反应域

我想将脚本制作成几个文件（例如 itemComponent 作为 React）并将它们合并到实际网站加载的 dist/app.js 中。为此，我使用了 gulp！

这是我的 gulpfile.js：

var source = require('vinyl-source-stream');
var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');
var babelify = require('babelify');

gulp.task('default', function() 
    return browserify('./source/' + file)
    .transform(babelify,  presets: ["es2015", "react"] )
    .bundle()
    .pipe(source(file))
    .pipe(gulp.dest('./dist'));
);

Gulp 实际上运行良好，一切都编译良好，没有错误。但是查看网站，它说：

app.js:19474 Uncaught ReferenceError: React is not defined

所以我删除了通过 npm 安装的 react 和 react-dom，只需下载 React 并从 html 加载，只需使用 script 标签，它就可以工作了。 但我想包括这样的反应：

import React from 'react';

但它不起作用。这是我的 app.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ItemList from './components/itemlist';

let items = [ ... ];

class App extends React.Component 
    render() 
        return (
            <div>
                <h1>List of items:</h1>
                <ItemList items=this.props.items />
            </div>
        )
    


ReactDOM.render(<App items=items />, document.getElementById('app'));

我不知道是什么问题，我不想使用脚本标签加载每个反应文件。有什么我错过的吗？

【问题讨论】：

您确定在所有 JSX 文件中都导入了 React 吗？当 JSX 转译为 React.createElement... 并且本地范围内没有 React 时，可能会发生此错误。例如，如果您有<h1>Hello<h1>，它将被转译为React.createElement("h1", null, "Hello")，因此您需要确定您在范围内有React。

感谢尼古拉！我忘了导入 React 每个单独的文件！它有效！

如果您准备就绪，请发布解决方案并将此问题标记为已回答。

【参考方案1】：

这个问题的原因是我忘记在子组件中导入 React 模块。

JSX 将转换为 React.createElement 之类的东西，但没有 React 存在，所以这就是我出现引用错误的原因。