javascript - Gulp med browserify, tsify och reactify?

Jag använder gulp med browserify och tsify i ett TypeScript-projekt. Följande är ett utdrag från min 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);
});

Det här fungerar hittills. Jag vill utöka detta så att jag kan require React JSX-filer. Först försökte jag (från en av mina TypeScript-filer):

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

Det här fungerar dock inte, eftersom tsify skulle klaga då det letar efter en TypeScript-fil ../jsx/Test.jsx.ts. Så jag använder följande hack:

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

Om Test.jsx är vanlig JavaScript fungerar detta. Om Test.jsx innehåller TypeScript skulle det misslyckas, vilket är vad jag förväntar mig. Hittills, så klart.

Nu vill jag lägga till reactify i mina gulp-uppgifter så att jag kan använda JSX i dessa filer. Här sitter jag fast! Jag försökte lägga till följande i funktionen browserified i min gulpfile.js:

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

Jag får fortfarande följande fel när jag kör gulp rebuild när Test.jsx innehåller riktig JSX:

Unexpected token <

Självklart sätter gulp i halsen på den första JSX-specifika termen. Jag tror att gulp försöker skicka JSX genom TypeScript-kompilatorn. Vilket inte är överraskande, eftersom jag inte kan komma på ett sätt att tala om för tsify att ignorera mina .jsx-filer. Jag är ny på gulp, så jag är lite vilse. Några idéer om hur man ställer in gulp för att tillåta TypeScript med alla .ts-filer och JSX med alla .jsx-filer?

Svar #1

Det här är gulp-uppgiften jag använder för utveckling. Den använder watchify tillsammans med browserify och reactify för att bygga din kod, tillhandahålla källkartläggning och ompaketera eventuella ändringar du gör direkt. Variabeln path.ENTRY_POINT är huvudkomponenten för din React-app (ofta app.js eller 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));
});

Jag använde denna handledning för att ställa in min gulpfile.js och den ger en bra förklaring för varje gulp-uppgift: http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/

Relaterade artiklar