我有以下gulp.js配置。它有点工作。一旦我在服务器上保存文件,我就可以看到重新开始的过程按预期开始和结束。然而,broswer只收到一个错误:
bundle.js:37 WebSocket connection to 'wss://myPage:4474/' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT
还有一个明显的警告:
Could not detect LiveReactLoad transform (livereactload/babel-transform).
然而,babel-transform是有效的,我已经遵循了所需的安装步骤..仍然有问题,有人知道吗?
//gulpfile.js
var source = {
html: 'react_src/index.html',
jsx: 'react_src/main.jsx'
};
var dist = {
html: 'templates/project',
scripts: 'static/js'
};
var sourcemaps = require('gulp-sourcemaps');
//Compile and Watch
function compile() {
var bundler = watchify(browserify(
{
entries: source.jsx,
debug: true,
extensions: ['.jsx'],
plugin: ["livereactload"],
}).transform(babel, {presets: ['es2015','stage-0', 'react']}));
function rebundle() {
return bundler.bundle()
// log errors if they happen
.on('error', function(err) {console.error(err); this.emit('end'); })
.pipe(vinyl_source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest(dist.scripts));
}
if (watch) {
// watch html
// processing method
let _build = () => {
return bundler.bundle()
.on('error', (err) => {
gutil.log(err.stack);
})
.pipe(vinyl_source('bundle.js'))
.pipe(gulp.dest('build'));
};
// on change
bundler.on('update', () => {
gutil.log('Rerunning browserify...');
const updateStart = Date.now();
_build().on('end', () => {
gutil.log(`...Done ${Date.now() - updateStart} ms`);
});
});
}
rebundle();
}
function watch() {
return compile(true);
}
//gulp.task('js', function (cb) { bundle().on('end', cb); });
// build jsx
gulp.task('build', function() {
return compile();
});
gulp.task('watch', function() {
return watch();
});
// build html
gulp.task('replaceHTML', function () {
gulp.src(source.html)
.pipe(htmlReplace({
'js': '<script src="{% static \'js\\bundle.js\' %}"></script>'
}))
.pipe(gulp.dest(dist.html));
});
gulp.task('server', ['replaceHTML'], function() {
return gulp.src(source.jsx)
.pipe(livereactload({
host: '0.0.0.0',
port: 8081
}));
});
答案 0 :(得分:0)
您应该在plugins
函数调用内传递babel
transform
选项:
.transform(babel, { presets: ['es2015','stage-0', 'react'], plugins: [...] }));