编译来自Gulp的React“您可能需要一个合适的加载器来处理这种文件类型。”

Question

我有一个现成的项目是用gulp构建的，我试图给它添加一个简单的'Hello World'React应用程序。运行gulp产生在终端中没有错误，但在浏览器控制台我有错误：

"Uncaught Error: Module parse failed: 
/private/var/www/mysite.com/public_html/app/back/js/index.jsx Unexpected token (7:6) You may need an appropriate loader to handle this file type.". 

的文件夹结构是：

public_html/ 
    app/ 
    back/ 
     js/ 
     index.jsx 
     bundle.js  #this should get created by the transpile 
    .babelrc 
    .gulpfile 
    package.json 
    webpack.config.js 

index.jsx：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var Test = React.createClass({ 
    render: function() { 
    return (
     <h1>Hello World</h1> 
    ); 
    } 
}); 

ReactDOM.render(<Test /> , document.getElementById('app')); 

包.json：

... 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.3.2", 
    "babel-preset-env": "^1.2.0", 
    "babel-preset-es2015": "^6.22.0", 
    "browser-sync": "^2.13.0", 
    "del": "^2.2.2", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "gulp-clean-css": "^2.0.10", 
    "gulp-header": "^1.8.7", 
    "gulp-jshint": "^2.0.4", 
    "gulp-less": "^3.1.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-replace": "^0.5.4", 
    "gulp-uglify": "^1.5.4", 
    "gulp-watch": "^4.3.10", 
    "merge-stream": "^1.0.1", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "run-sequence": "^1.2.2", 
    "webpack": "^2.2.1" 
    } 

个

gulpfile.js：

var gulp = require('gulp'); 
... 
var webpack = require('webpack') 
var webpack_config = require('./webpack.config.js'); 
... 
gulp.task('webpack', [] ,(done) => { 
    webpack(webpack_config, function(err, stats) { 
     if(err) { 
      console.log('error'); 
     } 
     else { 
      console.log('no error'); 
     } 
     done(); 
    }); 
}); 

webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    entry: './app/back/js/index.jsx', 
    output: { 
     path: './dist/app/back/js', 
     filename: 'bundle.js' 
    }, 
    module : { 
     loaders : [ 
     { 
      test : /\.jsx?/, 
      include : './app/back/js', 
      loader : 'babel-loader', 
      query: { 
       presets: ['es2015'] 
      } 
     } 
     ] 
    } 
}; 

module.exports = config; 

.babelrc：

{ 
    "presets" : ["es2015"] 
} 

我试图从SO多种解决方案，但错误依然存在。

谢谢你的帮助。

Answer 1

我能得到它的工作遵循汤姆的指示package.json和.babelrc也需要使用此webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    entry: './app/back/js/index.jsx', 
    output: { 
     path: __dirname + '/app/back/js', 
     filename: 'bundle.js' 
    }, 
    module : { 
     loaders : [ 
     { 
      test : /\.jsx?$/, 
      exclude: /node_modules/, 
      loader : 'babel-loader' 
     } 
     ] 
    } 
}; 

module.exports = config; 

Answer 2

你会错过这个巴巴尔预设：babel-preset-react。

所以 的package.json：

... 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.3.2", 
    "babel-preset-env": "^1.2.0", 
    "babel-preset-react": "^6.23.0", 
    "babel-preset-es2015": "^6.22.0", 
    "browser-sync": "^2.13.0", 
    "del": "^2.2.2", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "gulp-clean-css": "^2.0.10", 
    "gulp-header": "^1.8.7", 
    "gulp-jshint": "^2.0.4", 
    "gulp-less": "^3.1.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-replace": "^0.5.4", 
    "gulp-uglify": "^1.5.4", 
    "gulp-watch": "^4.3.10", 
    "merge-stream": "^1.0.1", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "run-sequence": "^1.2.2", 
    "webpack": "^2.2.1" 
    } 

.babelrc：

{ 
    "presets" : ["es2015", "react"] 
} 

而且有一些小的错误配置里面webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    entry: './app/back/js/index.jsx', 
    output: { 
     path: './dist/app/back/js', 
     filename: 'bundle.js' 
    }, 
    module : { 
     loaders : [ 
     { 
      test : /\.jsx?$/, 
      include : './app/back/js', 
      loader : 'babel-loader' 
     } 
     ] 
    } 
}; 

module.exports = config;