为 react 模板配置 browserify

Posted 2023-02-16

【中文标题】为 react 模板配置 browserify

【英文标题】：Config browserify for react templates

【发布时间】：2017-01-03 08:18:04

【问题描述】：

我在使用 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。但是我该如何配置呢？

这是我的 gulp 文件：

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;

提前致谢！

【参考方案1】：

我知道如何使用 react-templatify 做到这一点。对于有同样问题的人，我们只需要将这一行添加到 browserify 的配置中：

transform: ['react-templatify']

所以它的配置变成：

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