編譯來自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;