github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tweak ReactGrid's Webpack config in preparation for use of dev middleware

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-02 15:19:45 +00:00
parent 225dfdd168
commit 003918721d
7 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
samples/react/ReactGrid/.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
presets: ["es2015", "react"]
}

4
samples/react/ReactGrid/.gitignore vendored
View File

@@ -1,6 +1,4 @@
/node_modules/ /node_modules/
project.lock.json project.lock.json
/wwwroot/bundle.* /wwwroot/dist/
/wwwroot/*.svg
/wwwroot/*.css
/Properties/launchSettings.json /Properties/launchSettings.json

16
samples/react/ReactGrid/ReactApp/components/CustomPager.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import * as React from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
export class CustomPager extends React.Component { export class CustomPager extends React.Component {
@@ -7,8 +7,8 @@ export class CustomPager extends React.Component {
} }
render() { render() {
var previous = ""; var previous = null;
var next = ""; var next = null;
if(this.props.currentPage > 0){ if(this.props.currentPage > 0){
previous = <div className="btn btn-default"><Link className="previous" to={'/' + (this.props.currentPage)}><i className="glyphicon glyphicon-arrow-left"></i>{this.props.previousText}</Link></div>; previous = <div className="btn btn-default"><Link className="previous" to={'/' + (this.props.currentPage)}><i className="glyphicon glyphicon-arrow-left"></i>{this.props.previousText}</Link></div>;
@@ -20,12 +20,12 @@ export class CustomPager extends React.Component {
var options = []; var options = [];
var startIndex = Math.max(this.props.currentPage - 5, 0); var startIndex = Math.max(this.props.currentPage - 5, 0);
var endIndex = Math.min(startIndex + 11, this.props.maxPage); var endIndex = Math.min(startIndex + 11, this.props.maxPage);
if (this.props.maxPage >= 11 && (endIndex - startIndex) <= 10) { if (this.props.maxPage >= 11 && (endIndex - startIndex) <= 10) {
startIndex = endIndex - 11; startIndex = endIndex - 11;
} }
for(var i = startIndex; i < endIndex ; i++){ for(var i = startIndex; i < endIndex ; i++){
var selected = this.props.currentPage == i ? "btn-default" : ""; var selected = this.props.currentPage == i ? "btn-default" : "";

2
samples/react/ReactGrid/Views/Home/Index.cshtml
View File

@@ -1,5 +1,5 @@
<div id="react-app" asp-react-prerender-module="ReactApp/components/ReactApp.jsx"></div> <div id="react-app" asp-react-prerender-module="ReactApp/components/ReactApp.jsx"></div>
@section scripts { @section scripts {
<script src="/bundle.js"></script> <script src="/dist/main.js"></script>
} }

2
samples/react/ReactGrid/Views/Shared/_Layout.cshtml
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>ReactExample</title> <title>ReactExample</title>
<link rel="stylesheet" href="/main.css" /> <link rel="stylesheet" href="/dist/main.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">

2
samples/react/ReactGrid/package.json
View File

@@ -2,7 +2,7 @@
"name": "ReactExample", "name": "ReactExample",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"babel-core": "^6.4.0", "babel-core": "^6.4.5",
"bootstrap": "^3.3.5", "bootstrap": "^3.3.5",
"formsy-react": "^0.17.0", "formsy-react": "^0.17.0",
"formsy-react-components": "^0.6.3", "formsy-react-components": "^0.6.3",

19
samples/react/ReactGrid/webpack.config.js
View File

@@ -1,18 +1,27 @@
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = { module.exports = {
entry: './ReactApp/boot-client.jsx', devtool: 'eval-source-map',
output: { resolve: {
path: './wwwroot', extensions: [ '', '.js', '.jsx' ]
filename: 'bundle.js'
}, },
module: { module: {
loaders: [ loaders: [
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } }, { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
] ]
}, },
entry: {
main: ['./ReactApp/boot-client.jsx']
},
output: {
path: path.join(__dirname, '/wwwroot/dist'),
filename: '[name].js',
publicPath: '/dist/' // Tells webpack-dev-middleware where to serve the dynamically compiled content from
},
plugins: [ plugins: [
new ExtractTextPlugin('main.css') new ExtractTextPlugin('main.css')
] ]