在 browserify 和 babel 下 React JavaScript 与 ES6 编译问题答案

【问题标题】：React JavaScript with ES6 compiling issue under browserify and babel在 browserify 和 babel 下 React JavaScript 与 ES6 编译问题
【发布时间】：2015-11-11 06:17:10
【问题描述】：

我正在尝试使用最近引入的 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 问题，因为它不再自动提供任何“插件”。如果是这样 - 有人会这么好心并帮助我编辑我的 gulpfile.js（或其他文件），以便我将一切设置为使用 ES6 的荣耀并做出反应吗？

谢谢你:)

【问题讨论】：

你使用什么版本的 babelify？

标签： javascript reactjs gulp browserify babeljs

【解决方案1】：

或者 npm install --save-dev babel-preset-es2015 babel-preset-react and;

.transform(babelify, {
  presets:["es2015", "react"]
})

【讨论】：

该示例来自 gulp 配置。我不再使用 gulp 所以没有完整的例子。

【解决方案2】：

首先通过运行安装预设

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

现在在你的根目录中创建一个 `.babelrc' 文件并添加以下代码：

{
  "presets": ["es2015"]
}

现在它应该加载所有 es2015 插件，但仍然无法正常工作？请务必查看http://babeljs.io/blog/2015/10/31/setting-up-babel-6/

【讨论】：

也需要 babel-preset-react