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可以反应JSX文件。首先我尝试（从我的一个TypeScript文件）：

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

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

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

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

Unexpected token <

显然，gulp扼杀了第一个特定于JSX的术语。我认为gulp试图通过TypeScript编译器传递JSX。这并不奇怪，因为我无法想办法告诉tsify忽略我的.jsx文件。我是gulp的新手，所以我有点不知所措。任何想法如何设置gulp以允许TypeScript包含所有 .ts 文件和JSX以及所有 .jsx 文件？

Answer 1

这是我用于开发的gulp任务。它使用watchify以及browserify和reactify来构建代码，提供源映射，并重新绑定您在运行中所做的任何更改。 path.ENTRY_POINT变量是您的反应应用的主要组件（通常为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/

吞并浏览器化，重新认识和重新认识？

1 个答案: