首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用于react模板的配置浏览器化

用于react模板的配置浏览器化
EN

Stack Overflow用户
提问于 2016-08-26 15:42:09
回答 1查看 149关注 0票数 0

在使用Browserify和Babel构建bundle.js文件时,我遇到了问题。

Header.js:

代码语言:javascript
运行
复制
import HeaderRT from './Header.rt';

Header.rt:

代码语言:javascript
运行
复制
<div>Header></div>

错误:

代码语言:javascript
运行
复制
Browserify Error
.../Header.rt:1
<div>Header</div>
^
ParseError: Unexpected token

据我所知,所有".rt“文件都需要由react处理--模板,而不是Browserify。但我该如何配置呢?

这是我的吞咽文件:

代码语言:javascript
运行
复制
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;
}

提前谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-26 18:25:09

我将通过使用react-templatify.了解如何做到这一点。对于有同样问题的人,我们只需将这一行添加到browserify的配置:

代码语言:javascript
运行
复制
transform: ['react-templatify']

因此,它的配置变成:

代码语言:javascript
运行
复制
var customOpts = {
    entries: ['./main.js'],
    debug: true,
    transform: ['react-templatify']
};
var opts = assign({}, watchify.args, customOpts);
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39170015

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档