Question

我有一个用gulp构建的现有项目，我正在尝试添加一个简单的“Hello World＆＃39;反应应用程序。运行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'));

的package.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

您将缺少此预设宝贝：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;

Answer 2

我能够按照Tom对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;

从Gulp编译React＆＃34;您可能需要一个合适的加载器来处理这种文件类型。＆＃34;

2 个答案: