根据browserify和babel下的ES6编译问题反应JavaScript

我正在尝试使用最近引入的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);

导入另一个组件的My 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;

运行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'

我读到这可能是一个巴别塔问题，因为它不再自动提供任何“插件”。如果是这样的话，有人会这么好心，帮我编辑我的gulpfile.js（或其他文件），这样我就可以使用ES6的荣耀并做出反应了吗

---

谢谢：）

首先通过运行

$ npm install --save-dev babel-preset-es2015

现在在根目录中创建一个“.babelrc”文件，并添加以下代码：

{
  "presets": ["es2015"]
}

现在它应该加载所有es2015插件，但仍然不工作？确保检查

或npm安装-保存dev babel-preset-es2015 babel-preset-react

.transform（babelify{
预设：[“es2015”，“反应”]
})

您使用的是什么版本的babelify？还需要babel预设，该示例来自一个吞咽配置。我不再使用gulp，因此没有完整的示例。

$ npm install --save-dev babel-preset-es2015

{
  "presets": ["es2015"]
}