Gulp + Browserify + Babelify意外标记
即时通讯使用Gulp转换使用Browserify和Babelify jsx / es6，但我得到的错误： Unexpected token (7:12) while parsing file: app.jsx我做错了什么？ 我可以
app.jsx （7:12是<div> ）
import React from 'react';
import Header from './header.jsx';
class App extends React.Component{
render() {
return (
<div>
<Header />
<div className="container">
{this.props.children}
</div>
</div>
);
}
}
export default App;
gulpfile.js
var bundler = watchify(browserify({
entries: './client/components/app.jsx',
transform: [babelify],
extensions: ['.jsx'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
}));
function bundle(file) {
if (file) gutil.log('Recompiling' + file);
return bundler
.bundle()
.on('error', gutil.log.bind(gutil, "Browserify Error"))
.pipe(source('bundle.js'))
.pipe(gulp.dest('./client/scripts'))
}
bundler.on('update', bundle);
gulp.task('build', function() {
bundle()
});
并在我的package.json中我有：
"browserify": {
"transform": [["babelify", {"presets": ["es2015"]}]]
}
更新
gulp.task('build', function () {
gulp.src('./client/components/app.jsx')
.pipe(browserify({
extensions: ['.jsx'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
}))
.pipe(babelify({presets: ['es2015', 'react']}))
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
.pipe(gulp.dest('./client/scripts/'))
});
我改变了一口气的任务，但现在我得到了错误：
Browserify Error [TypeError: Invalid non-string/buffer chunk]
您目前没有将jsx转换为正常的Javascript。
在您的Browserify配置中，您应该有一个react预设来实现此目的。 对你而言，这将是：
"browserify": {
"transform": [["babelify", {"presets": ["es2015", "react"]}]]
}
您还需要安装此预设。 npm install babel-preset-react
有关预设的更多信息
有关反应预设的更多信息
链接地址: http://www.djcxy.com/p/5641.html