web-dev-qa-db-ja.com

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"
  }
}

そして私の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が必要なシムを正しく作成しないのはなぜですか？

javascriptnode.jsgulpreactjsbrowserify
21
asolberg

UPDATE：さまざまなパッケージ化ツールを使用して、これに関する新しい投稿を作成しました。 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']);

クロムで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);

これがあなたの役に立つことを願っています！

12
christianalfoni

ファイルでbrowserifyを直接実行し、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で、あなたが持っているように-反応、閲覧などを必要とします。ここでブラウザのシム化、変換などを使用することもできます。

  "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パイプラインに入ることです。

8
the_5imian

私はこれを反応作業に使います。

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']);
2
Tareq Jobayere

browserifyを使用するためのgulpレシピは次のとおりです（vinyl-transform and friends）とまったく同じ

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']);
1
Hafiz Ismail

私はあなたのコードの何が間違っているのか直接知りませんが、私はこれを使用しています

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を使用することを好みます。

これがあなたのために働くかどうか教えてください、そうでなければ私はサンプルテンプレートを抽出することができます...

0
wires

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"));
});
0
monkey

定義する

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（ 'react'）を使用する場合、オブジェクトReactは他のスクリプトからは見えませんが、React = require（ 'react'）はグローバル値を定義します。

0
ahll