在browserify和babel下面使用ES6編譯問題反應JavaScript

我想用最近推出的ES6語法創建一個基本的React組件。在browserify和babel下面使用ES6編譯問題反應JavaScript

我現在的文件架構是這樣的：我有應導入反應的根feed.jsx文件和我的自定義組件

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;

導入頭部件也是一個基本之一：

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內容，這應該編譯一切成一個文件：在運行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']);

右：

[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的榮耀和反應？

謝謝:)

來源

2015-11-11 noa-dev

你用什麼版本babelify的？ –

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

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

來源

2015-11-11 16:47:24

我在哪裏提到的代碼？ – Lichtamberg

該示例來自gulp配置。我不再使用吞嚥，所以沒有完整的例子。 –

首先通過運行

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

現在在你的根目錄下建立一個`.babelrc」文件，並添加以下代碼安裝預設：

{ 
    "presets": ["es2015"] 
}

現在它應該加載所有的es2015插件，仍然無法工作？一定要檢查http://babeljs.io/blog/2015/10/31/setting-up-babel-6/

來源

2015-11-11 09:04:02

還需要babel-preset-react – FakeRainBrigand

在browserify和babel下面使用ES6編譯問題反應JavaScript

回答

相關問題