用 browserify、tsify 和 reactify 吞咽？答案

【问题标题】：Gulp with browserify, tsify, and reactify?用 browserify、tsify 和 reactify 吞咽？
【发布时间】：2015-04-20 14:08:27
【问题描述】：

我在 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 是普通的 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 以允许 TypeScript 与所有 .ts 文件和 JSX 与所有 .jsx 文件？

【问题讨论】：

标签： javascript reactjs typescript gulp react-jsx

【解决方案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/

【讨论】：