javascript - 一个react+webpack打包出错的初级问题。

问题描述

问 题

一个非常简单的react-demo，没有加render的时候可以成功打捆，一旦在main.js中(也可以在其他模块中，反正始终是第一次出现render的地方)加

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

就在<App />的第一个尖括号处报错，
文件代码地址如下：
webpack.config.js ：

    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js",
    },
    module: {
        loaders: [
            {
                include: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel'
              }
        ]

    }
};

main.js :

var App = require("./components/App.js");
var React = require('react');
var ReactDOM = require('react-dom');

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

./components/App.js :

var React = require('react');
var ReactDOM = require('react-dom');

var App = React.createClass({
  render: function() {
    return (
      <div>
        123
      </div>
    );
  }
});

module.exports = App;

package.json :

{
  "name": "react-demo",
  "version": "1.0.0",
  "main": "server/server.js",
  "scripts": {
    "start": "node .",
    "pretest": "eslint .",
    "posttest": "nsp check"
  },
  "dependencies": {
    "babel": "^6.5.2",
    "babel-register": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "compression": "^1.0.3",
    "cors": "^2.5.2",
    "helmet": "^1.3.0",
    "serve-favicon": "^2.0.1",
  },
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "eslint": "^2.5.3",
    "nsp": "^2.1.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "webpack": "^1.13.1"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "license": "UNLICENSED",
  "description": "react-demo"
}

解决方案

babel 也是通过插件才能解析 jsx 的，所以你需要再安装个插件：babel-preset-react

1、安装插件

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

2、修改配置

module: {
        loaders: [
            {
                include: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react']
                }
              }
        ]

    }

这篇关于javascript - 一个react+webpack打包出错的初级问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！