我将使用gulp-browserify生成bundle.js文件,以便在客户端浏览器中包含并开始渲染React组件。
这是我的App.js文件:
/** @jsx React.DOM */
var React = require('react');
var App = React.createClass({
render: function() {
return <h1>Hello {this.props.name}!</h1>;
}
});
module.exports = App;
我的 package.json 文件如下:
"name":"hellosign-gulp",
"version":"0.1.1",
"dependencies": {
"gulp": "3.5.x",
"gulp-browserify": "0.5.0",
"reactify": "~0.8.1",
"react": "^0.10.0",
"gulp-react": "0.2.x"
}
}
和我的 gulpfile
var gulp = require('gulp'),
react = require('gulp-react'),
browserify = require('gulp-browserify');
gulp.task('brow-test', function() {
// Single entry point to browserify
gulp.src('./src/App.js', {read: false})
.pipe(browserify({
insertGlobals : true,
transform: ['reactify'],
extensions: ['.jsx'],
debug :false.
}))
.pipe(gulp.dest('.'))
});
现在当我运行“brow-test”时,我将输出文件重命名为bundle.js,并将其与HTTP响应一起包含在浏览器中。 bundle.js文件相当大,因此我不会在此处包含它,但是浏览器最终会抛出一个错误。
未捕获的引用错误:require未定义。
我使用以下命令正确地运行了常规版本的browserify,具有完全相同的设置。
browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js
然后我就不会再出现错误了。为什么gulp-browserify没有正确创建require shim?
-r react -r ./src/App
(对gulp不是很熟悉)。 - Brigand