在 browserify 和 babel 下使用 ES6 编译问题 React JavaScript
React JavaScript with ES6 compiling issue under browserify and babel
我正在尝试使用最近引入的 ES6 语法创建一个基本的 React 组件。
我当前的文件架构如下所示:
我有一个根 feed.jsx 文件,应该导入 React 和我的自定义组件
import React from 'react';
import ReactDOM from 'react-dom';
import FeedApp from './components/FeedApp';
var target = document.getElementById('FeedApp');
ReactDOM.render(FeedApp, target);
我的 FeedApp 导入了另一个组件,如下所示:
import React from 'react';
import Header from './Header';
class FeedApp extends React.Component{
constructor(){
this.state = {
customHeading: "Hello"
}
}
render() {
return (
<div className="clearfix wrapper">
<Header />
</div>
);
}
}
export default FeedApp;
导入的Header组件也是基础的:
import React from 'react';
class Header extends React.Component {
render() {
return(
<div className="top-bar">
<div className="top-logo-wrapper">
<a href="/" title="Homepage">
<img src="/imgs/logo-b.png" alt="Logo" />
</a>
<a href="/" title="Homepage">
<h1>Title</h1>
</a>
</div>
</div>
);
}
}
export default Header;
最后但同样重要的是我的 gulpfile 内容,它应该将所有内容编译到一个文件中:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('build', function () {
browserify({
entries: 'public/js/build/feed.jsx',
extensions: ['.jsx'],
debug: true
})
.transform(babelify)
.bundle()
.pipe(source('public/js/build/bundle.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['build']);
在 运行 gulpfile 之后我得到以下输出:
[12:15:49] Working directory changed to /path/folder
[12:15:49] Using gulpfile /path/folder/gulpfile.js
[12:15:49] Starting 'build'...
[12:15:49] Finished 'build' after 22 ms
[12:15:49] Starting 'default'...
[12:15:49] Finished 'default' after 7.46 μs
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
我读到这可能是一个 babel 问题,因为它不再自动提供任何 "addons"。如果是这样 - 有人会这么好心帮我编辑我的 gulpfile.js (或其他文件),以便我设置一切以使用 ES6 的荣耀并做出反应吗?
谢谢:)
首先通过运行
安装预设
$ npm install --save-dev babel-preset-es2015
现在在您的根目录中创建一个 `.babelrc' 文件并添加以下代码:
{
"presets": ["es2015"]
}
现在它应该加载所有的 es2015 插件,但仍然无法正常工作?请务必检查 http://babeljs.io/blog/2015/10/31/setting-up-babel-6/
或者 npm install --save-dev babel-preset-es2015 babel-preset-react and;
.transform(babelify, {
presets:["es2015", "react"]
})
我正在尝试使用最近引入的 ES6 语法创建一个基本的 React 组件。
我当前的文件架构如下所示: 我有一个根 feed.jsx 文件,应该导入 React 和我的自定义组件
import React from 'react';
import ReactDOM from 'react-dom';
import FeedApp from './components/FeedApp';
var target = document.getElementById('FeedApp');
ReactDOM.render(FeedApp, target);
我的 FeedApp 导入了另一个组件,如下所示:
import React from 'react';
import Header from './Header';
class FeedApp extends React.Component{
constructor(){
this.state = {
customHeading: "Hello"
}
}
render() {
return (
<div className="clearfix wrapper">
<Header />
</div>
);
}
}
export default FeedApp;
导入的Header组件也是基础的:
import React from 'react';
class Header extends React.Component {
render() {
return(
<div className="top-bar">
<div className="top-logo-wrapper">
<a href="/" title="Homepage">
<img src="/imgs/logo-b.png" alt="Logo" />
</a>
<a href="/" title="Homepage">
<h1>Title</h1>
</a>
</div>
</div>
);
}
}
export default Header;
最后但同样重要的是我的 gulpfile 内容,它应该将所有内容编译到一个文件中:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('build', function () {
browserify({
entries: 'public/js/build/feed.jsx',
extensions: ['.jsx'],
debug: true
})
.transform(babelify)
.bundle()
.pipe(source('public/js/build/bundle.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['build']);
在 运行 gulpfile 之后我得到以下输出:
[12:15:49] Working directory changed to /path/folder
[12:15:49] Using gulpfile /path/folder/gulpfile.js
[12:15:49] Starting 'build'...
[12:15:49] Finished 'build' after 22 ms
[12:15:49] Starting 'default'...
[12:15:49] Finished 'default' after 7.46 μs
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
我读到这可能是一个 babel 问题,因为它不再自动提供任何 "addons"。如果是这样 - 有人会这么好心帮我编辑我的 gulpfile.js (或其他文件),以便我设置一切以使用 ES6 的荣耀并做出反应吗?
谢谢:)
首先通过运行
安装预设$ npm install --save-dev babel-preset-es2015
现在在您的根目录中创建一个 `.babelrc' 文件并添加以下代码:
{
"presets": ["es2015"]
}
现在它应该加载所有的 es2015 插件,但仍然无法正常工作?请务必检查 http://babeljs.io/blog/2015/10/31/setting-up-babel-6/
或者 npm install --save-dev babel-preset-es2015 babel-preset-react and;
.transform(babelify, {
presets:["es2015", "react"]
})