我正在尝试使用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文件非常大，所以我不会在这里包含它，但浏览器最终会抛出错误
未捕获的ReferenceError：未定义require
我使用这些命令
使用常规版本的browserify正确运行此设置browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js
然后我没有得到错误。为什么gulp-browserify没有正确创建require shim？
答案 0 :(得分：12)
更新：我使用不同的打包工具在此上写了一篇新帖子。它还包括browserify的优化示例：Choosing the correct packaging tool for React JS
任何阅读这篇文章的人都可以启动并运行React JS工作流程：
我遇到很多问题，最后写了一篇帖子：React JS and a browserify workflow。这是我的解决方案，确保您可以转换JSX并处理其他文件的单独监视。
var gulp = require('gulp');
var source = require('vinyl-source-stream'); // Used to stream bundle for further handling etc.
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./app/main.js'], // Only need initial file, browserify finds the deps
transform: [reactify], // We want to convert JSX to normal javascript
debug: true, // Gives us sourcemapping
cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('main.js'))
// This is where you add uglifying etc.
.pipe(gulp.dest('./build/'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('./build/'));
});
// I added this so that you see how to run two watch tasks
gulp.task('css', function () {
gulp.watch('styles/**/*.css', function () {
return gulp.src('styles/**/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('build/'));
});
});
// Just running the two tasks
gulp.task('default', ['browserify', 'css']);
要解决在chrome中使用React JS DEV-TOOLS的问题，您需要在 main.js 文件中执行此操作：
/** @jsx React.DOM */
var React = require('react');
// Here we put our React instance to the global scope. Make sure you do not put it
// into production and make sure that you close and open your console if the
// DEV-TOOLS does not display
window.React = React;
var App = require('./App.jsx');
React.renderComponent(<App/>, document.body);
我希望这会帮助你开始！
答案 1 :(得分：8)
直接在您的文件上运行browserify，并且不要使用gulp-browserify插件。
在此引用：https://github.com/gulpjs/plugins/issues/47
＆＃34; Browserify应该用作独立模块。它返回一个流并找出你的依赖图。如果您需要乙烯基物体，请使用browserify + vinyl-source-stream＆＃34;
你可以达到你想要的结果：
var source = require('vinyl-source-stream'), //<--this is the key
browserify = require('browserify');
function buildEverything(){
return browserify({
//do your config here
entries: './src/js/index.js',
})
.bundle()
.pipe(source('index.js')) //this converts to stream
//do all processing here.
//like uglification and so on.
.pipe(gulp.dest('bundle.js'));
}
}
gulp.task('buildTask', buildEverything);
现在，在你的包Json中，你需要做出反应，browsierify等等。你也可以在这里填充浏览器，使用变换或其他任何东西。
"dependencies": {
"react": "^0.10.0",
},
"devDependencies": {
"browserify": "3.46.0",
"browserify-shim": "3.x.x",
}
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"react": "React",
}
或者jsut就像你一样，并在你使用它的页面上包含反应
var React = require('react');
或者如果你想要一些方便的助手：
var React = require('react/addons');
但最重要的是直接在gulp中使用browserify并使用vinyl-source-stream进入gulp管道。
答案 2 :(得分：2)
我用这个来做我的反应工作。
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./assets/react/main.js'],
transform: [reactify],
debug: true,
cache: {}, packageCache: {}, fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () {
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest('./assets/js/'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest('./assets/js/'));
});
gulp.task('default', ['browserify']);
答案 3 :(得分：1)
这是使用browserify（与vinyl-transform和朋友）实现完全相同的
browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js`
src/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;
gulpfile.js 中的
var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var reactify = require('reactify');
var rename = require("gulp-rename");
gulp.task('build', function () {
// browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js
var browserified = transform(function(filename) {
return browserify()
// -t reactify
.transform(reactify)
// -r react
// update below with the correct path to react/react.js node_module
.require('./node_modules/react/react.js', { expose: 'react'})
// -r ./src/App
// filename = <full_path_to>/src/App.js
.require(filename, {expose: 'src/App'})
.bundle();
});
return gulp.src('./src/App.js')
.pipe(browserified)
.pipe(rename('bundle.js'))
.pipe(gulp.dest('../webapp/static/'));
});
gulp.task('default', ['build']);
答案 4 :(得分：0)
我没有直接看到您的代码有什么问题，但我使用了这个
gulp.src('./src/js/index.js')
.pipe(browserify())
.on('prebundle', function(bundle) {
// React Dev Tools tab won't appear unless we expose the react bundle
bundle.require('react');
})
.pipe(concat('bundle.js'))
我使用https://www.npmjs.org/package/gulp-react来转换.jsx，但现在我更喜欢使用常规的javascript。
让我知道这是否适合您，如果不是，我可以提取示例模板......
答案 5 :(得分：0)
的package.json：
{
"devDependencies": {
"gulp": "^3.8.11",
"gulp-browserify": "^0.5.1",
"reactify": "^1.1.0"
},
"browserify": {
"transform": [["reactify", { "es6": true }]],
"insertGlobals": true,
"debug": true
}
}
gulpfile.js：
var gulp = require('gulp');
var browserify = require('gulp-browserify');
gulp.task('browserify', function() {
return gulp.src("./assets/index.js")
.pipe(browserify())
.pipe(gulp.dest("./www/assets"));
});
答案 6 :(得分：0)
定义
React=require('react');
ReactDOM = require('react-dom');
App.js中的那些全局javascript值，而不是这个
var stream = require('vinyl-source-stream');
var browserify = require('browserify');
browserify(source + '/app/app.js')
// bundles it and creates a file called main.js
.bundle()
.pipe(stream('main.js'))
// saves it the dest directory
.pipe(gulp.dest(destination +'/assets/js'));
在Gulpfile.js。
最后，将main.js放在HTML中，它应该可以工作。
问题是如果我们使用var React = require（＆＃39; react＆＃39;），则从其他脚本看不到对象React，但是React = require（＆＃39; react＆＃39;）定义了全球价值。