Конфигурировать браузер для реагирующих шаблонов

Question

У меня возникла проблема при создании файла bundle.js с Browserify и Babel.

Header.js:

import HeaderRT from './Header.rt'; 

Header.rt:

<div>Header></div> 

Ошибка:

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

Как я понимаю, все файлы ".rt" должны быть обработаны по реакционным шаблонам, но не с помощью браузера. Но как я могу настроить это?

Это мой Глоток файл:

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

Я узнаю, как это сделать, используя contact-templatify. Для кого-то, кто имеет такую ​​же проблему, нам нужно просто добавить эту строку в browserify-х конфигурации:

transform: ['react-templatify'] 

Таким образом, ее конфигурация становится:

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