Gulp + Browserify + Babelify unexpected token
Im using Gulp to transform jsx/es6 using Browserify and Babelify but I'm getting the error: Unexpected token (7:12) while parsing file: app.jsx What am I doing wrong? I can
app.jsx (7:12 is <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()
});
and in my package.json I have:
"browserify": {
"transform": [["babelify", {"presets": ["es2015"]}]]
}
Update
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/'))
});
I changed the gulp task but now I get the error:
Browserify Error [TypeError: Invalid non-string/buffer chunk]
You're currently not transforming the jsx into normal Javascript.
In your Browserify configuration you should have a react preset to achieve this. For you this would be:
"browserify": {
"transform": [["babelify", {"presets": ["es2015", "react"]}]]
}
You'll also need to install this preset. npm install babel-preset-react
More information about presets
More information about react preset
链接地址: http://www.djcxy.com/p/5642.html