Question

我一直致力于将咕噜咕噜的任务转换为gulp。 grunt文件如下所示：

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

我看到了很多browserify和gulp的例子，但他们都只有一个文件起点。为了解决这个问题，我尝试使用glob。经过几次错误的开始，我想出了以下内容。它运行没有错误并创建一个bundle.js文件，但是retify似乎没有正常工作，因为jsx似乎没有被转换，所以我最终得到了错误：

未捕获错误：找不到模块＆＃39; ./ components / NoteApp.jsx＆＃39;

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文件夹的布局方式。代码来自此article，它使用此github zip源来演示反应和反流。该项目非常接近我所需的起点，但使用的是Grunt而不是Gulp。

react文件夹的结构如下：

react \ App.jsx \ Bootstrap.jsx \ components \ NoteApp.jsx \ NoteCreationBox.jsx \ Note.jsx \ NoteListBox.jsx \ NoteList.jsx \ TextArea.jsx

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

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

但是更改此行会导致gulp talk失败并丢失文件错误。

Answer 1

我想我现在得到了答案。它实际上是一些版本混合，重新加工似乎更先进和处理事情不同于原来的重新设置。可能是因为两者仍处于实验状态。我也猜测React / Reflux继续运行，所以你最终得到了一些不太合规的版本。但是，您仍然可以修复它并运行app：

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提供的重新设置。请参阅上面的代码。你应该只能切换中间件。此外，不要遍历所有文件，只是您的主要入口点，在这种情况下Bootstrap.jsx。

我知道这很不方便，也许当您尝试自己的应用时，请先重新设置。

**更新**

之后是我的package.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"
  }
}

当使用带有browserify和glob的reactify变换时，为什么我的gulp任务没有转换为jsx

1 个答案: