对我的React.js模块使用gulp-browserify，我在浏览器中得到'require is not defined'
我正在尝试使用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" } }
和我的大文件
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不能正确创buildrequire shim？
更新：我写了一个新的post，使用不同的包装工具。 它还包括一个browserify的优化示例： 为React JSselect正确的打包工具
任何阅读这篇文章的人都可以启动和运行React JS工作stream程：
我有很多问题得到这个工作，最后写了一个post： React JS和一个浏览工作stream程 。 这是我的解决scheme，确保您可以转换您的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);
我希望这会帮助你走了！
直接在你的文件上运行browserify，不要使用gulp-browserify插件。
引用在这里： https ： //github.com/gulpjs/plugins/issues/47
“Browserify应该作为一个独立的模块使用，它返回一个stream并计算出你的依赖关系图，如果你需要乙烯对象，使用browserify + vinyl-source-stream”
你可以像这样达到你想要的结果：
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.xx", } "browserify": { "transform": [ "browserify-shim" ] }, "browserify-shim": { "react": "React", }
或者像你一样，并且在你使用它的页面中包含反应
var React = require('react');
或者如果你想要一些便利的帮手：
var React = require('react/addons');
但底线是直接使用浏览器，并使用乙烯源stream进入吞吐pipe道。
我用这个来做我的反应。
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']);
这里是使用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']);
我没有直接看到你的代码有什么问题，但是我正在使用它
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。
让我知道这是否适合你，如果不是，我可以提取一个示例模板…
的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")); });
确定
React=require('react'); ReactDOM = require('react-dom');
这些全球性的JavaScript值在App.js中，比放在这里
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（'react'），那么对象React从其他脚本不可见，但React = require（'react'）定义一个全局值。