Question

尝试了解如何将构建系统（如gulp）集成到我的Node / React工作流程中。这是我天真的理解：在开发中，您希望将所有JSX编译成普通的JS。你可以用gulp和gulp-watchify之类的东西来做这件事。在对文件进行更新后，gulp会将您的文件和包裹[重新整理]转换为自己的文件。

现在这是我理解困难的部分。我见过的所有示例似乎都将主节点文件（app.js或main.js）消化为条目并将其捆绑到解释的.js文件中。但我并没有试图解释我的Node文件，它是我需要解释的JSX文件。我不应该试图“吞咽”＃39;我的JSX文件，然后将它们放入具有唯一文件名的自己的目录中，然后在我的HTML模板中编写包含那些捆绑文件而不是原始.jsx文件的标记？

使用不同的React组件保持有组织的文件结构，并且只能将它们包含在视图模板中的策略是什么？感谢

这是我的gulpfile.js 现在它在/ build目录中创建了一个捆绑的server.js。我不知道如何处理该捆绑文件，因为它需要客户端元素，我无法使用node build / server.js运行它

＆＃13;

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: ['./server.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() // Create new bundle that uses the cache for high performance
    .pipe(source('server.js'))
    // This is where you add uglifying etc.
    .pipe(gulp.dest('./build/'));
    console.log('Updated!', (Date.now() - updateStart) + 'ms');
  })
  .bundle()
  .pipe(source('server.js'))
  .pipe(gulp.dest('build/'));
});

// Just run browserify
gulp.task('default', ['browserify']);

＆＃13;

- 编辑 -

我已经删除了我的gulpfile以执行我之前提到的操作。简单地“解决”＆＃39;我的组件并将捆绑的对应物放入/构建。但是当我尝试从我的模板加载它时，它无法找到该文件。这是为什么？

＆＃13;

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('gulp-react');
var concat = require('gulp-concat');

gulp.task('reactify', function(){
  return gulp.src('./public/javascripts/components/**')
    .pipe(reactify())
    .pipe(gulp.dest('./build'));
});

// Just run browserify
gulp.task('default', ['reactify']);

＆＃13;

了解gulp-reactify工作流程/结构

0 个答案: