与browserfy、tsify和reatify一起咕咕叫

Gulp with browserify, tsify, and reactify?

本文关键字：一起 reatify browserfy tsify      更新时间：2024-01-11

我在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添加到我的gump任务中，这样我就可以在这些文件中使用JSX我被卡住了我尝试在gulpfile.js的函数browserified中添加以下内容：

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

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

Unexpected token <

显然，在JSX的第一个特定术语中，gullow令人窒息。我认为gulp试图通过TypeScript编译器传递JSX。这并不奇怪，因为我想不出如何告诉tsify忽略我的.jsx文件。我是gulp的新手，所以我有点不知所措。有什么想法吗？如何设置gulp以允许TypeScript包含所有.ts文件，并允许JSX包含所有
.JSX文件？

这是我用于开发的gump任务。它使用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，它为每个吞咽任务提供了很好的解释：http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/

相关文章：