javascript - 一个react+webpack打包出错的初级问题。
大家讲道理
大家讲道理 2017-04-11 11:38:15
[JavaScript讨论组]

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

ReactDOM.render(, document.getElementById('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(, document.getElementById('app'));

./components/App.js :

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

var App = React.createClass({
  render: function() {
    return (
      

123

); } }); 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"
}
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(4)
黄舟

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']
                }
              }
        ]

    }
黄舟

需要babel-preset-react

PHP中文网

这是react语法,要架个jsx-loader转换下

怪我咯

试试jsx转换,用babel就转换babel

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号