webpack + react + es6, 并附上自己碰到的一些问题

最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/ruanyf/react-babel-webpack-boilerplate,

学完了基础就想倒腾倒腾,webpack整合react加es6。

1.webpack + react + es6

1.1 新建项目

项目目录如下

webpack + react + es6, 并附上自己碰到的一些问题

具体的内容就不解释了,大家应该都看得懂

1.2 配置webpack

配置文件如下

var path = require('path');
var webpack = require('webpack'); module.exports = {
context: __dirname + "/",
entry: ["./src/js/test.js"],
output: {
path: path.join(__dirname, './src/build'),
filename: "main.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.scss$/,
loader: 'style!css!sass',
}]
},
// plugins: [
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// })
// ]
};

  

module中功能包括jsx转js,es6装es5,scss转css,

这里使用到了 webpack 的一个内置插件 UglifyJsPlugin,通过他可以对生成的文件进行压缩,这里我注释掉了

1.3 上代码

接下来把重要的代码给大家

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./build/main.js"></script>
</body>
</html>

foot.js

import React from 'react';

export default class Foot extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hello World</h1>;
}
}

test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Foot from './foot.js'; require('./../css/base.scss'); ReactDOM.render(
<Foot />,
document.getElementById("app")
);

这是最简单的webpack加react,test.js为入口文件

2.常见问题

问题1  Uncaught TypeError: Super expression must either be null or a function, not undefined

如果碰到这个问题不要去百度了,先狠狠的打自己一顿起,因为你是单词写错了,出现这个问题百分之99.99是因为单词写错了,反正我是把Component写成了Compontent

问题2  Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

    

出现这个问题,我也搞了很久,最后把  import { Foot } from './foot.js'  改成了 import Foot from './foot.js' 就解决了,使用export default时,对应的import语句不需要使用大括号,不使用export default时,对应的import语句需要使用大括号。

最后: 我只是一个萌萌的前端,有问题一起思考,大家共同进步

上一篇:webpack+react+es6开发模式


下一篇:linux系统环境下的静态库和动态库的制作