ОБНОВЛЕНИЕ: я не могу в это поверить. После нескольких часов попыток использовать всевозможную магию gulp я не понимаю, это был отсутствующий закрывающий тег </script> в index.html для bundle.js
Я действительно озадачен этим. Я начал создавать приложение React.js, и я не хочу использовать преобразователь jsx на стороне HTML, а предварительно скомпилировать его! В настоящее время я делаю следующее:
<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). Я в замешательстве, потому что "bundle.js" - это обычный 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:
Полный 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>
As you can see I load a vendor.js in the head tag of the index.html, which I guess is browsercompatible JavaScript as well.
В любом случае, я надеюсь, что предоставил всю необходимую информацию.
