Question

我在浏览器中使用gulp并使用reactify转换将react jsx转换为浏览器可以运行的内容，但是browserify只将我的main.jsx文件转换为js文件。它似乎不包括依赖项。

我的目录结构是：

src
--js
----main.jsx
----components
------app.jsx
------hello.jsx
--index.html

在上面的目录结构中，我用.jsx标记了jsx文件。从技术上讲，它们目前标有.js。因此在gulpfile中使用.js而不是.jsx。我已将其更改为.jsx，目的是澄清它们是.jsx文件。

我的gulpfile.js是：

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');

var path = {
  HTML: 'src/index.html',
  OUT: 'build.js',
  DEST: 'dist',
  DEST_SRC: 'dist/src',
  ENTRY_POINT: './src/js/main.js'
};

gulp.task('copy', function(){
  gulp.src(path.HTML)
    .pipe(gulp.dest(path.DEST));
});

gulp.task('watch', function() {
  gulp.watch(path.HTML, ['copy']);

  var watcher  = watchify(browserify({
    entries: [path.ENTRY_POINT],
    transform: [reactify],
    debug: true,
    cache: {}, packageCache: {}, fullPaths: true
  }));

  return watcher.on('update', function () {
    watcher.bundle()
      .pipe(source(path.OUT))
      .pipe(gulp.dest(path.DEST_SRC))
      console.log('Updated');
  })
    .bundle()
    .pipe(source(path.OUT))
    .pipe(gulp.dest(path.DEST_SRC));
});

gulp.task('default', ['watch']);

但是，在我的dist文件夹中，我只有一个index.html和一个带有main.js文件的main.js文件：

/** @jsx React.DOM */
var React = require('react');

var App = require('./components/app.js');

React.render(
  React.createElement(App, null),
  document.getElementById('main')
);

这看起来像JSX-＆gt; JS转换后的文件，没有浏览器依赖性解析。

我是节点，浏览器和新手的新手，所以这可能是一个不了解它在浏览器中的组合方式或每个组件的作用的问题。

Browserify不会遍历react应用程序中的依赖项（在Gulp中）

0 个答案: