javascript - 使用 browserify、tsify 和 reactify？

Question

我在 TypeScript 项目中将 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 React 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 是纯 vanilla JavaScript，则可以。如果 Test.jsx 包含 TypeScript，它将失败，这是我所期望的。到目前为止，很清楚。

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

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

当 Test.jsx 包含实际的 JSX 时调用 gulp rebuild 时我仍然收到以下错误:

Unexpected token <

显然，gulp 在遇到第一个 JSX 特定术语时就卡住了。我认为 gulp 试图通过 TypeScript 编译器传递 JSX。这并不奇怪，因为我想不出一种方法来告诉 tsify 忽略我的 .jsx 文件。我是 gulp 的新手，所以我有点不知所措。关于如何设置 gulp 以允许带有所有 .ts 文件的 TypeScript 和带有所有 .jsx< 的 JSX 的任何想法/em> 文件？

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/