反応テンプレートをブラウザーで表示

Question

BrowserifyとBabelでbundle.jsファイルを作成するときに問題があります。

Header.js：

import HeaderRT from './Header.rt'; 

Header.rt：

<div>Header></div> 

エラー：私は理解しているように、 ".rt" のすべてのファイルを処理する必要が

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

反応テンプレートではなく、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を使用してそれを行う方法を見つけます。同じ問題を持っている人のために、私たちはただのconfigをbrowserifyするために、この行を追加する必要があります。

transform: ['react-templatify'] 

だから、その設定は次のようになります。

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