使用 browserify 打包 React 组件

IT技术 javascript reactjs gulp browserify
2021-05-12 00:53:40

我正在尝试学习 browserify 来管理我的 javascript。我的第一个简单任务是创建一个 react.js 文件,该文件将由 gulp + browserify 生成

var browserify = require('gulp-browserify');

gulp.task('browserify-react', function () {
  return gulp.src('js/react/react.js')
  .pipe(browserify())
  .pipe(rename('react-generated.js'))
  .pipe(gulp.dest('./dist'));
});

在 js/react/ 我创建了一个 react.js 文件,它只是两个 require 命令:

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

我希望一个新文件 react-generated.js 将包含 react 和 react-dom module。

将生成文件,但是当我尝试在我的项目中使用这个 react-generated.js 时,我收到两个错误

ReferenceError: React is not defined
ReferenceError: ReactDOM is not defined

但是如果我使用来自 facebook 的 react javascript,那么一切都很好,没有错误

<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>

问题。当我使用 gulp-browserify 生成react组件时,我会错过什么?

1个回答

你的 react.js 文件/module没有暴露变量ReactReactDOM你实例化。在 node 中,您可以通过module.exports像这样修改对象来公开这些方法

module.exports = {
  React: React,
  ReactDOM: ReactDOM
}