Question

我正在尝试使用最近推出的ES6语法创建一个基本的React组件。

我当前的文件架构如下所示：我有一个root 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'

我已经读过这可能是个问题，因为它不再自动提供任何“插件”。如果它是这样 - 有人会这么善良并帮助我编辑我的gulpfile.js（或其他文件），这样我就可以设置一切使用ES6的荣耀并作出反应吗？

谢谢：）

Answer 1

首先通过运行

安装预设

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

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

{
  "presets": ["es2015"]
}

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

Answer 2

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

var templateUrl = object_name.templateUrl;
loading: {
    finishedMsg: $('<div class="finmsg">No More Posts.</div>'),
    msgText: 'Loading More Posts',
    img: " url'"+templateUrl+"/images/loader.gif' "
},

在browserify和babel下使用ES6编译问题来实现JavaScript

2 个答案: