为什么我的gulp任务在使用browserfy和glob的reatify转换时没有转换jsx

Question

我一直致力于将咕哝任务转换为gullow。咕哝文件如下：

 browserify: {
     options: {
         transform: [ require('grunt-react').browserify ]
     },
     client: {
         src: ['react/**/*.jsx'],
         dest: 'public/js/browserify/bundle.js'
     }
}

我看到了很多浏览和吞咽的例子，但所有的例子都只有一个文件起点。为了解决这个问题，我试着用glob。在几次起跑失误后，我想出了以下几点。它运行时没有错误，并创建了一个bundle.js文件，但reatify似乎工作不正常，因为jsx似乎没有转换，所以我最终出现了错误：

未捕获错误：找不到模块"/组件/NoteApp.jsx'

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var reactify = require('reactify');
gulp.task('browserify', function (cb) {
  glob('./react/**/*.jsx', {}, function (err, files) {
    var b = browserify();
    files.forEach(function (file) {
      b.add(file);
    });
    b.transform(reactify);
    b.bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./public/js/browserify/'));
    cb();
  }); 
});

ddprrt要求提供有关结构的更多详细信息，以下是react文件夹的布局。代码取自本文，该文章使用github zip源代码来演示反应和回流。这个项目非常接近我需要的起点，但使用了Grunt而不是Gulp。

react文件夹的结构如下：

react\App.jsx\引导程序.jsx\components\NoteApp.jsx\NoteCreationBox.jsx\备注.jsx\NoteListBox.jsx\NoteList.jsx\TextArea.jsx

错误来自App.jsx文件中的一行：

var React = require('react');
var NoteApp=require('./components/NoteApp.jsx');

但是更改这一行会导致gulp-talk失败，并出现文件丢失错误。

Answer 1

我想我现在得到了答案。这真的是一个版本混淆，reatify似乎比原作中的reatify更高级，处理事情的方式也不同。可能是因为两者都还处于实验状态。我还猜测React/Reflux继续前进，所以你最终得到了一些不太符合要求的版本。然而，你仍然可以修复它并运行你的应用程序：

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var reactify = require('grunt-react').browserify;
gulp.task('browserify', function (cb) {
    glob('./react/Bootstrap.jsx', function (err, files) {
        var b = browserify({
            entries: files
        }).transform(reactify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./public/js/browserify/'));
        cb();
    }); 
});

我们不使用require('reactify')，而是使用grunt-react提供的reactivity。请参阅上面的代码。您应该能够切换中间件。此外，不要查看所有的文件，只查看您的主要入口点，在这种情况下是Bootstrap.jsx。

我知道这很不方便，也许当你尝试自己的应用程序时，可以从新的设置开始。

**更新**

那是我后来的包.json，只是在做上一个项目：

{
  "name": "react-note-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "main": "./bin/www"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "dependencies": {
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "ejs": "~0.8.5",
    "express": "~4.9.0",
    "express-session": "^1.8.2",
    "morgan": "~1.3.0",
    "node-jsx": "^0.11.0",
    "react": "^0.11.2",
    "reflux": "^0.1.13",
    "serve-favicon": "~2.1.3"
  },
  "devDependencies": {
    "browserify": "^9.0.7",
    "glob": "^5.0.3",
    "grunt": "^0.4.5",
    "grunt-browserify": "^3.0.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-nodemon": "^0.3.0",
    "grunt-react": "^0.9.0",
    "gulp": "^3.8.11",
    "react-tools": "^0.11.2",
    "reactify": "^1.1.0",
    "vinyl-source-stream": "^1.1.0"
  }
}