Config browserify for react templates

Question

使用Browserify和Babel構建bundle.js文件時出現問題。

Header.js：

import HeaderRT from './Header.rt'; 

Header.rt：

<div>Header></div> 

錯誤：

Browserify Error 
.../Header.rt:1 
<div>Header</div> 
^ 
ParseError: Unexpected token 

據我所知，所有的 「RT」 的文件需要處理通過react-templates而不是由Browserify完成。但我怎麼配置？

這是我一飲而盡文件：

var gulp  = require('gulp'); 
var fs   = require("fs"); 
var browserify = require("browserify"); 
var babelify = require("babelify"); 
var source  = require('vinyl-source-stream'); 
var gutil  = require('gulp-util'); 
var inject  = require('gulp-inject'); 
var rename  = require('gulp-rename'); 
var clean  = require('gulp-clean'); 
var debug  = require('gulp-debug'); 
var watchify = require('watchify'); 
var assign  = require('lodash.assign'); 
var sourcemaps = require('gulp-sourcemaps'); 
var rt   = require('gulp-react-templates'); 

var customOpts = { 
    entries: ['./main.js'], 
    debug: true, 
    ignoreTransform: ['rt'] 
}; 
var opts = assign({}, watchify.args, customOpts); 
var b = watchify(browserify(opts)); 
b.transform(babelify); 

gulp.task('js', bundle); 
b.on('update', bundle); 
b.on('log', gutil.log); 

gulp.task('default', ['js']); 

function bundle() { 
    gulp.src('./dist/*.js', {read: false}) 
     .pipe(clean()); 

    var bundleFile = b.bundle() 
     .on('error', gutil.log.bind(gutil, 'Browserify Error')) 
     .pipe(source('./bundle.js')) 
     .pipe(rename('bundle_' + parseInt(Math.random() * 100000) + '.js')) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest('./dist')); 

    gulp.src('./index.html') 
     .pipe(inject(bundleFile)) 
     .pipe(gulp.dest('./')); 

    return bundleFile; 
} 

提前感謝！

Answer 1

我發現如何使用react-templatify來做到這一點。對於誰的人有同樣的問題，我們只需要加入這一行browserify的配置：

transform: ['react-templatify'] 

所以它的配置就變成了：

var customOpts = { 
    entries: ['./main.js'], 
    debug: true, 
    transform: ['react-templatify'] 
}; 
var opts = assign({}, watchify.args, customOpts);