javascript - webpack编译成功 console 提示class is a reserved identifier
本文介绍了javascript - webpack编译成功 console 提示class is a reserved identifier的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
app.js
import React from 'react';
import Hello from './hello.jsx';
main();
function main() {
React.render(<Hello />, document.getElementById('app'));
}hello.jsx
import React from 'react';
export default class Hello extends React.Component {
render() {
return <h1>Hello world</h1>;
}
}webpack.config.js
var path = require('path');
var config = {
entry: path.resolve(__dirname, 'main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}]
}
};
module.exports = config;webpack执行结果
Hash: c02ddfd9c43ddfa17021
Version: webpack 2.1.0-beta.5
Time: 8695ms
Asset Size Chunks Chunk Namesbundle.js 619 kB 0 [emitted] main
-
158 hidden modules
测试页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="app"></div>
<script src="build/bundle.js"></script>
</body>
</html>浏览器显示无结果,但是控制台报错 SyntaxError: class is a reserved identifier @ http://localhost/build/bundle.js:10097
解决方案
添加一个.babelrc文件，然后添加如下代码
{
"presets": ["es2015", "stage-0", "react"]
}记得安装babel-preset-es2015和babel-preset-react,babel-preset-stage-0
这篇关于javascript - webpack编译成功 console 提示class is a reserved identifier的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
