import webpack from 'webpack';
import path from 'path';
import CopyWebpackPlugin from 'copy-webpack-plugin';
const SOURCE_PATH = path.resolve(__dirname, 'src');
const OUTPUT_PATH = path.resolve(__dirname, 'dist');
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('development'),
'global.IS_BROWSER': true
};
export default {
debug: true,
devtool: 'source-map',
noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page
if hot module reloading fails.
'./src/index'
],
target: 'web',
output: {
path: OUTPUT_PATH, // Note: Physical files are only output by the
production
build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.DefinePlugin({ 'process.env.API_HOST': process.env.API_HOST }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loaders: ['babel']
},
{
test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'es2017'],
plugins: [
'transform-class-properties',
'transform-object-rest-spread',
'transform-decorators-legacy',
'transform-react-jsx',
'transform-runtime'
]
}
},
{
test: /\.json$/,
loader: 'json'
},
{ test: /(\.css)$/, loaders: ['style', 'css'] },
{ test: /\.(png||jpg||jpeg||ico)(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
{ test: /\.gif$/, loader: 'file?name=[name].[ext]' },
{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
resolve: {
alias: {
"ag-grid": path.resolve('./node_modules/ag-grid'),
"ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
react: path.resolve('./node_modules/react')
},
extensions: ['', '.js', '.jsx']
}
};
这是组件
import React, { PropTypes } from 'react';
import { Link, browserHistory } from 'react-router';
import {AgGridReact, AgGridColumn} from "ag-grid-react";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/theme-blue.css";
class clientList extends React.Component {
constructor(props) {
super(props);
this.state = {
rowData: [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
]
};
}
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
}
render() {
let containerStyle = {
height: 115
};
return (
<div>
<div style={containerStyle} className="ag-theme-blue">
<AgGridReact
// properties
rowData={this.state.rowData}
// events
onGridReady={this.onGridReady}
enableSorting
enableFilter>
{/*column definitions */}
<AgGridColumn field="make"></AgGridColumn>
<AgGridColumn field="model"></AgGridColumn>
<AgGridColumn field="price"></AgGridColumn>
</AgGridReact>
</div>
</div>
);
}
export default clientList;
任何人，请帮助我。我正在为表开发 AgGridReact 组件，我能够使用该组件提供的所有功能，但表没有出现。
