吞噬了浏览器，tsify和reactify？

Question

我使用的是gulp用browserify和tsify在打字稿项目。以下是我的摘录gulpfile.js：

var browserified = function (filename, debug) {
  var b = browserify({
    entries: filename,
    debug: debug || false
  });
  b.plugin('tsify', {
    noImplicitAny: true,
    target: 'ES5'
  });
  b.transform('debowerify');
  return b.bundle();
};

gulp.task('rebuild', ['lint', 'less'], function() {
    var b = browserified ('./src/ts/main.ts', true);
    return buildSourceMaps (b);
});

到目前为止，该方法有效。我想扩展它，以便我可以require响应JSX文件。首先，我尝试了（从我的TypeScript文件之一开始）：

import Test = require ('../jsx/Test.jsx');

但是，这不起作用，因为tsify在寻找TypeScript文件时会抱怨../jsx/Test.jsx.ts。因此，我使用以下技巧：

declare var require: any;
var Test = require ('../jsx/Test.jsx');

如果Test.jsx是普通的JavaScript，则可以使用。如果Test.jsx包含TypeScript，它将失败，这是我期望的。到目前为止，如此清晰。

现在，我想添加reactify到gulp任务，以便可以在这些文件中使用JSX。在这里我被卡住了！我尝试将以下内容添加到browserified我的函数中gulpfile.js：

b.plugin ('reactify', {
    extension: 'jsx'
});

当调用包含实际JSX的电话gulp rebuild时，仍然出现以下错误Test.jsx：

Unexpected token <

显然，第一个特定于JSX的术语令人目结舌。我认为gulp试图通过TypeScript编译器传递JSX。这不足为奇，因为我想不出一种方法来告诉tsify忽略我的.jsx文件。我是的新手gulp，所以我有点茫然。有什么想法如何设置gulp以允许TypeScript使用所有.ts文件以及JSX使用所有.jsx文件？

Answer 1

这是我用于开发的 gulp 任务。它watchify与browserify和 一起使用reactify来构建您的代码，提供源映射，并重新捆绑您即时所做的任何更改。该path.ENTRY_POINT变量是您的 React 应用程序的主要组件（通常app.js是 或main.js）。

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));
});

我使用本教程来设置我的gulpfile.js，它为每个 gulp 任务提供了很好的解释： http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/