├── .eslintrc ├── .gitignore ├── README.md ├── index.html ├── index.js ├── package.json ├── src ├── common │ └── lib.js ├── components │ └── Top.js ├── containers │ └── App.js └── entry │ └── index.js ├── test └── index-spec.js └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea/ 3 | .ipr 4 | .iws 5 | *~ 6 | ~* 7 | *.diff 8 | *.patch 9 | *.bak 10 | .DS_Store 11 | Thumbs.db 12 | .project 13 | .*proj 14 | .svn/ 15 | *.swp 16 | *.swo 17 | *.pyc 18 | *.pyo 19 | node_modules 20 | dist 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ant-koa-demo 2 | A demo for http://ant.design/ 3 | 4 | ## Environment 5 | 6 | ``` 7 | node >= 4.0.0 8 | ``` 9 | 10 | ## Install 11 | 12 | ``` 13 | npm install cnpm -g --registry=https://registry.npm.taobao.org 14 | cnpm install 15 | ``` 16 | ## Develop 17 | 18 | ``` 19 | npm run dev 20 | ``` 21 | 22 | 访问 http://127.0.0.1:3001 23 | 24 | ## Build 25 | 26 | ``` 27 | cnpm install webpack -g 28 | npm run build 29 | ``` 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | <%= title %> 11 | 60 | 61 | 62 |

<%- body %>

63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * A demo for http://ant.design/ 3 | * 4 | * v0.1.0 - 2015-12-15 5 | * @author Carrotzpc 6 | */ 7 | 8 | 'use strict'; 9 | 10 | const koa = require('koa') 11 | const logger = require('koa-logger') 12 | const Router = require('koa-router') 13 | const render = require('koa-ejs') 14 | const serve = require('koa-static') 15 | const webpack = require('webpack') 16 | 17 | const app = koa() 18 | 19 | // middleware 20 | app.use(logger()) 21 | 22 | // webpack 23 | const webpackDevMiddleware = require('koa-webpack-dev-middleware') 24 | const webpackHotMiddleware = require('webpack-hot-middleware') 25 | const webpackConfig = require('./webpack.config') 26 | const compiler = webpack(webpackConfig) 27 | app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath })) 28 | app.use(function* (next) { 29 | yield webpackHotMiddleware(compiler).bind(null, this.req, this.res) 30 | yield next 31 | }) 32 | 33 | // serve files from ./dist 34 | app.use(serve(__dirname + '/dist')) 35 | 36 | // views 37 | render(app, { 38 | root: __dirname, 39 | layout: false, 40 | viewExt: 'html', 41 | debug: true, 42 | cache: false 43 | }) 44 | 45 | app.use(function *() { 46 | yield this.render('index', { title: '首页', body: '

ant-koa-demo

' }); 47 | }) 48 | 49 | // listen 50 | app.listen(3001) 51 | console.log('listening on port 3001') 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ant-koa-demo", 3 | "version": "0.1.0", 4 | "description": "A demo for http://ant.design/", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/Carrotzpc/ant-koa-demo" 8 | }, 9 | "bugs": { 10 | "url": "https://github.com/Carrotzpc/ant-koa-demo/issues" 11 | }, 12 | "contributors": [ 13 | "Carrotzpc" 14 | ], 15 | "entry": { 16 | "index": "./src/entry/index.js" 17 | }, 18 | "dependencies": { 19 | "antd": "0.10.x", 20 | "koa": "^1.1.2", 21 | "koa-ejs": "^3.0.0", 22 | "koa-logger": "^1.3.0", 23 | "koa-router": "^5.3.0", 24 | "koa-static": "^1.5.2", 25 | "less": "2.x", 26 | "react": "~0.14.3", 27 | "react-dom": "~0.14.3" 28 | }, 29 | "devDependencies": { 30 | "autoprefixer-loader": "^3.1.0", 31 | "babel-cli": "^6.2.0", 32 | "babel-core": "^6.3.15", 33 | "babel-eslint": "~4.0.5", 34 | "babel-loader": "^6.2.0", 35 | "babel-plugin-add-module-exports": "^0.1.1", 36 | "babel-polyfill": "^6.3.14", 37 | "babel-preset-es2015": "^6.1.18", 38 | "babel-preset-react": "^6.1.18", 39 | "babel-preset-stage-0": "^6.1.18", 40 | "concurrently": "^1.0.0", 41 | "css-loader": "^0.23.0", 42 | "eslint": "~1.6.0", 43 | "eslint-config-airbnb": "~0.1.0", 44 | "eslint-plugin-react": "~3.5.1", 45 | "expect.js": "~0.3.1", 46 | "extract-text-webpack-plugin": "^0.9.1", 47 | "js-base64": "^2.1.9", 48 | "json-loader": "^0.5.1", 49 | "koa-webpack-dev-middleware": "^1.0.1", 50 | "less": "~2.5.3", 51 | "less-loader": "^2.2.0", 52 | "lesshint-antd": "~1.1.0", 53 | "pre-commit": "1.x", 54 | "react-transform-hmr": "^1.0.1", 55 | "webpack": "^1.12.9", 56 | "webpack-hot-middleware": "^2.6.0" 57 | }, 58 | "pre-commit": [ 59 | "lint" 60 | ], 61 | "scripts": { 62 | "start": "npm run dev", 63 | "dev": "node index.js", 64 | "test": "antd test", 65 | "lint": "eslint --ext .js,.jsx src", 66 | "build": "webpack" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/common/lib.js: -------------------------------------------------------------------------------- 1 | import 'antd/lib/index.css'; 2 | -------------------------------------------------------------------------------- /src/components/Top.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Menu } from 'antd'; 3 | const SubMenu = Menu.SubMenu; 4 | 5 | export default class Top extends Component { 6 | render() { 7 | return ( 8 | 10 | 导航一 11 | 导航二 12 | 导航三 13 | 14 | ); 15 | } 16 | }; -------------------------------------------------------------------------------- /src/containers/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Top from '../components/Top' 3 | import { Menu, Breadcrumb, Calendar } from 'antd'; 4 | 5 | const App = React.createClass({ 6 | render() { 7 | return ( 8 |

9 |

10 |

11 |

12 | 13 |

14 |

15 |

16 |

17 | 19 | 二级导航 20 | 二级导航 21 | 二级导航 22 | 23 |

24 |

25 |

26 |

27 | 28 | 首页 29 | 应用列表 30 | 某应用 31 | 32 |

33 |

34 |

35 |

36 |

37 |

40 |

41 | ) 42 | } 43 | }) 44 | 45 | export default App 46 | -------------------------------------------------------------------------------- /src/entry/index.js: -------------------------------------------------------------------------------- 1 | import '../common/lib'; 2 | import App from '../containers/App'; 3 | import ReactDOM from 'react-dom'; 4 | import React from 'react'; 5 | 6 | ReactDOM.render(, document.getElementById('react-content')); 7 | -------------------------------------------------------------------------------- /test/index-spec.js: -------------------------------------------------------------------------------- 1 | import expect from 'expect.js'; 2 | 3 | describe('index', () => { 4 | 5 | it('normal', () => { 6 | expect(1).be.equal(1); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin") 4 | 5 | module.exports = { 6 | devtool: 'source-map', 7 | 8 | entry: [ 9 | 'webpack-hot-middleware/client', 10 | './src/entry/index.js' 11 | ], 12 | 13 | resolve: { 14 | extensions: ['', '.js', '.jsx'], 15 | }, 16 | 17 | output: { 18 | path: path.join(__dirname, 'dist'), 19 | filename: 'bundle.js', 20 | publicPath: '/static/' 21 | }, 22 | 23 | /*externals: { 24 | react: "React", 25 | jquery: 'jQuery' 26 | },*/ 27 | 28 | module: { 29 | loaders: [{ 30 | test: /\.js$/, 31 | loader: 'babel', 32 | query: { 33 | presets: ['es2015', 'react', 'stage-0'], 34 | plugins: ['add-module-exports'], 35 | }, 36 | exclude: /node_modules/, 37 | include: __dirname 38 | }, { 39 | test: /\.json$/, 40 | loader: 'json-loader' 41 | }, { 42 | test: /\.less$/, 43 | loader: ExtractTextPlugin.extract( 44 | 'css?sourceMap&-restructuring!' + 'autoprefixer-loader!' + 'less?sourceMap' 45 | ) 46 | }, { 47 | test: /\.css$/, 48 | loader: ExtractTextPlugin.extract( 49 | 'css?sourceMap!' + 'autoprefixer-loader' 50 | ) 51 | }] 52 | }, 53 | 54 | plugins: [ 55 | new webpack.optimize.OccurenceOrderPlugin(), 56 | new webpack.HotModuleReplacementPlugin(), 57 | new webpack.NoErrorsPlugin(), 58 | new ExtractTextPlugin('[name].css') 59 | ] 60 | } 61 | --------------------------------------------------------------------------------