为我的 React 使用 gulp-browserify.js我在浏览器中得到"需求未定义"的模块

我正在尝试使用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;

和my 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('.'))
});

现在，当我运行' browser -test'时，我将输出文件重命名为bundle.js，并将其包含在浏览器的HTTP响应中。bundle。js文件很大，这里就不写了浏览器会抛出一个错误

Uncaught ReferenceError: require is not defined

我使用这些命令让这个完全相同的设置与常规版本的browserify正确运行

browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js

然后我没有得到错误。为什么gulp-browserify不能正确地创建需求表?

更新:我写了一篇关于这个的新文章，使用不同的打包工具。它还包括一个优化的browserify示例:为React JS选择正确的打包工具

对于那些阅读这篇文章想要获得React JS工作流的人:

我遇到了很多问题，最后写了一篇关于它的文章:React JS和一个browserify工作流。这是我的解决方案，确保您可以转换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，不要使用use gulp-browserify插件

此处参考:https://github.com/gulpjs/plugins/issues/47

"Browserify应该作为一个独立的模块使用。它返回一个流并计算出您的依赖关系图。如果你需要乙烯基对象，使用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中，你有- require react, browsierify等等。你也可以在这里进行浏览器化，使用变换或者其他方法。

  "dependencies": {
    "react": "^0.10.0",  
  },
  "devDependencies": {
     "browserify": "3.46.0",
    "browserify-shim": "3.x.x",
   }
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
     "react": "React", 
  }

或者就像你自己一样，并在你使用它的页面上包含react

var React = require('react');

或者这个如果你想要一些方便的帮助的东西:

var React = require('react/addons');

但是最重要的是在gulp中直接使用browserify，并使用vinyl-source-stream进入gulp管道。

我使用这个为我的反应工作。

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及其朋友)来实现完全等同于

的gulp配方

browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js`

in 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;

in 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 ')定义一个全局值

相关内容

最新更新

热门标签：