使用Antd的Table组件会报错误
- index.js
import React from 'react';
import './role.less'
// import 'antd/dist/antd.css';
import { Table } from 'antd';
const dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}];
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
export default class Refuel extends React.Component {
render() {
return (
<Table dataSource={dataSource} columns={columns} />
)
}
}
- package.json
{
"name": "react1706",
"version": "1.0.0",
"description": "react demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline --hot --history-api-fallback",
"clean": "rimraf dist",
"build": "npm run clean && webpack --config webpack.pro.config.js",
"rebuild": "webpack --config webpack.pro.config.js"
},
"author": "zuokeliang",
"license": "ISC",
"dependencies": {
"antd": "^2.13.10",
"axios": "^0.17.0",
"flux": "^3.1.3",
"history": "^4.7.2",
"layui-src": "^2.2.2",
"react": "^15.6.1",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^3.0.1",
"react-swipe": "^5.1.0",
"react-transition-group": "^2.2.1",
"redux": "^3.7.2",
"redux-deferred": "^0.1.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"velocity": "^0.7.2"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-import": "^1.6.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"cssgrace": "^3.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"open-browser-webpack-plugin": "^0.0.5",
"postcss-loader": "^2.0.8",
"postcss-px2rem": "^0.3.0",
"react-hot-loader": "^3.1.2",
"react-transition-group": "^2.2.1",
"rimraf": "^2.6.2",
"source-list-map": "^2.0.0",
"source-map": "^0.6.1",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
- webpack.config.js
var path = require("path");
var webpack = require("webpack"); //main.js 出口文件
var HtmlWebpackPlugin = require("html-webpack-plugin"); // 曹组 html
var OpenBrowserWebpackPlguin = require("open-browser-webpack-plugin"); // 打开浏览器
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"); // 抽离样式 css文件
module.exports = {
entry:["./src/scripts/index.js"],
devtool:"source-map",
output:{
path:path.resolve(__dirname,"dist"),
filename:"js/[name].[hash:8].js", //以文件内容 的 MD5 加密 生成 hash 名称的scripts 来防止缓存
publicPath:"" // 生成 html 自动引用路径 publicPath
},
module:{ // 模块声明加载 方式 js / css / img
rules:[
{
test:/\.js[x]?$/,
use:["babel-loader"],
exclude:[path.resolve(__dirname,'node_modules')]
},
{
test:/\.(css|less)$/,
use:ExtractTextWebpackPlugin.extract({
fallback:"style-loader" ,
use:["css-loader",{ // css-loader打包模块
loader:"postcss-loader",
options:{
plugins:function(){
return [
require("cssgrace"),
// require("postcss-px2rem")({remUnit:75}),
require("autoprefixer")()
]
}
}
},'less-loader']
})
},
{
test:/\.(gif|jpg|png|woff|woff2|svg|eot|ttf)\??.*$/,
use:["url-loader?limit=8192&name=font/[hash:8].[name].[ext]"]
}
]
},
// 插件
plugins:[
// new OpenBrowserWebpackPlguin({url:"http://localhost:3000"}),
new HtmlWebpackPlugin({
template:"./src/index.html",
inject:true // 自动注入 js/css
}),
new ExtractTextWebpackPlugin({
filename:"app.[hash].css",
allChunks:true,
disable:false
}),
new webpack.HotModuleReplacementPlugin(),
],
}
