在browserfy和babel下,用ES6编译问题对JavaScript进行反应

React JavaScript with ES6 compiling issue under browserify and babel

本文关键字:JavaScript 问题 编译 ES6 browserfy babel      更新时间:2023-09-26

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

运行gullfile后,我得到以下输出:

[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问题,因为它不再自动提供任何"插件"。如果是这样的话,会有人帮我编辑gullfile.js(或其他文件),让我做好一切准备,使用ES6的荣耀并做出反应吗?

谢谢:)

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

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

首先通过运行安装预设

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

现在在根目录中创建一个".babelrc"文件,并添加以下代码:

{
  "presets": ["es2015"]
}

现在它应该加载所有的es2015插件,仍然不工作?一定要检查http://babeljs.io/blog/2015/10/31/setting-up-babel-6/