javascript - 使用 webpack+react构建前端项目,babel编译 jsx失败,请问为什么
本文介绍了javascript - 使用 webpack+react构建前端项目,babel编译 jsx失败,请问为什么的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
webpack.config.js
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var config = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
resolve: {
alias: {
'react': pathToReact
}
},
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js'
},
module: {
noParse: [pathToReact],
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}, {
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.less$/,
loader: 'style!css!less'
},{
test: /\.(png|jpg)$/,
loader: 'url?limit=25000'
}]
}
};
module.exports = config;
package.json
{
"name": "react",
"version": "2.0.0",
"dec": "this is a biz rep",
"main": "app/main.js",
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"react": "^0.14.8",
"react-dom": "^0.14.8",
"react-hot-loader": "^3.0.0-beta.6",
"react-router": "^2.4.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"jsx-loader": "^0.13.2"
},
"pre-commit": [],
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}
}
jsx 代码
import React from 'react';
import ReactDOM from 'react-dom';
var AppComponent = React.createClass({
render: function(){
return (<main>Most Popular JavaScript </main>);
}
});
ReactDOM.render(<AppComponent />, document.getElementById('content'));
报错信息图:
请大神帮忙看看,好纠结,就是个搞不好它,~~(>_<)~~
解决方案
jsx的loader需要加参数才能识别jsx语法,如下
loaders: [{
test: /\.jsx?$/,
loader: 'babel?presets[]=es2015&presets[]=react'
}]
这篇关于javascript - 使用 webpack+react构建前端项目,babel编译 jsx失败,请问为什么的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文