Question

更新：我无法相信。经过数小时和数小时尝试各种gulp魔法我不明白，它是index.html中bundle.js缺少的</script>结束标记

我真的很难过这个。我已经开始创建一个React.js应用程序，我不想使用HTML端jsx转换器但是预编译它！目前我正在做以下事情：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js">
    </script>
    ....
    <script type="text/babel" src="build/bundle.js"/>

这很有效。但是当我通过gulp / browserify / reactify / transform使用预编译器时，它会在我启动（WebStorm或BrowserSync）服务器时显示一个空白页面。我很困惑，因为＆＃34; bundle.js＆＃34;是简单的JavaScript - 至少我认为它是......？所有jsx语法都已转换为JavaScript。这是gulpfile代码：

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var reactify = require('reactify');
var browserSync = require('browser-sync').create();
var babel = require('babel');
var libs = ['material-ui', 'react', 'react-tap-event-plugin'];

gulp.task('default', ['vendor', 'bundle', 'browser-sync']);

gulp.task('vendor', function () {
var b = browserify();

libs.forEach(function(lib) {
    b.require(lib);
});
return b.bundle()
    .pipe(source('vendor.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('bundle', bundle);
var b = watchify(browserify('./components/app.jsx', watchify.args));
b.on('update', bundle);
b.transform(reactify);
b.on('log', gutil.log);

libs.forEach(function(lib) {
    b.external(lib);
});

function bundle() {
    return b.bundle()
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./build/'));
};

gulp.task('browser-sync', function() {
    browserSync.init(["build/bundle.js", "css/*.css"],{
        server: {
            baseDir: "./"
        }
    });
});

和bundle.js：

http://pastebin.com/56ep1dT7

完整的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn react</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-     core/5.8.23/browser.js"></script>
    <script src="build/vendor.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500'    rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
    <div id="mountPoint"/>
    <script type="text/babel" src="build/bundle.js"/>
</body>

正如您所看到的，我在index.html的head标签中加载了vendor.js，我猜这也是浏览器兼容的JavaScript。

无论如何，我希望我提供了所有必要的信息。

Answer 1

你使用实际的es6语法吗？因为这是使用babel的唯一原因，但是如果你已经预编译了所有东西，（假设你使用es6）事先用babel es5转换es6，那么你只需要在浏览器中加载bundle.js而不使用任何其他魔法，你无论如何都在预编译。

那么你就可以摆脱babel浏览器了＆lt; ---这不会做任何事情，因为我在你的代码中没有看到任何es6语法。

-  so try using a normal scripttag if you arent using es6
-  if you are using es6 add the babel process to the gulp task
-  remove babel-browser completely ,u don't want to do that within the client on page load anyway,  it will decrease performance (just precompile)

你实际上已经要求babel加入你的gulptask但是不能使用它：）

React的JSX变换器无法正常工作。找不到错误

1 个答案: