├── snippets
├── Component.less
├── Layout.less
├── antd-init.alfredsnippets
├── service.js
├── reducer.js
├── Layout.jsx
├── Component.jsx
├── Container.jsx
├── saga.js
└── reducerWithComposition.js
├── boilerplates
├── demo
│ ├── gitignore
│ ├── index.css
│ ├── index.html
│ ├── webpack.config.js
│ ├── index.js
│ └── package.json
└── MobileDemo
│ └── README.md
├── .npmignore
├── examples
├── local-iconfont
│ ├── custom.less
│ ├── index.less
│ ├── iconfont
│ │ ├── iconfont.eot
│ │ ├── iconfont.ttf
│ │ ├── iconfont.woff
│ │ └── iconfont.svg
│ ├── webpack.config.js
│ ├── index.html
│ ├── index.jsx
│ ├── package.json
│ └── README.md
├── build-antd-standalone
│ ├── index.jsx
│ ├── index.html
│ ├── webpack.config.js
│ ├── README.md
│ └── package.json
└── customize-antd-theme
│ ├── theme.js
│ ├── index.html
│ ├── webpack.config.js
│ ├── package.json
│ ├── README.md
│ └── index.jsx
├── .jshintignore
├── Makefile
├── .editorconfig
├── CHANGELOG.md
├── .gitignore
├── .jshintrc
├── package.json
├── README.md
├── bin
└── antd-init
├── lib
└── install.js
└── test
└── index-spec.js
/snippets/Component.less:
--------------------------------------------------------------------------------
1 |
2 | .normal {
3 | }
4 |
--------------------------------------------------------------------------------
/snippets/Layout.less:
--------------------------------------------------------------------------------
1 |
2 | .normal {
3 | }
4 |
--------------------------------------------------------------------------------
/boilerplates/demo/gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | tmp
4 | node_modules
5 | examples
6 |
--------------------------------------------------------------------------------
/boilerplates/demo/index.css:
--------------------------------------------------------------------------------
1 |
2 | html, body, #root {
3 | height: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/examples/local-iconfont/custom.less:
--------------------------------------------------------------------------------
1 | @icon-url: "/iconfont/iconfont"; // 把 iconfont 地址改到本地
2 |
--------------------------------------------------------------------------------
/examples/local-iconfont/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/dist/antd.less";
2 | @import "custom.less";
3 |
--------------------------------------------------------------------------------
/.jshintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | test/fixtures
4 | test/expected
5 | tmp
6 | demo
7 | spm_modules
8 |
--------------------------------------------------------------------------------
/snippets/antd-init.alfredsnippets:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ant-design/antd-init/HEAD/snippets/antd-init.alfredsnippets
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 |
2 | publish:
3 | npm publish
4 |
5 | publish-sync: publish
6 | cnpm sync antd-init
7 | tnpm sync antd-init
8 |
--------------------------------------------------------------------------------
/examples/build-antd-standalone/index.jsx:
--------------------------------------------------------------------------------
1 | import 'antd/lib/index.css';
2 | import antd from 'antd';
3 | window.antd = antd;
4 |
--------------------------------------------------------------------------------
/boilerplates/MobileDemo/README.md:
--------------------------------------------------------------------------------
1 | ## antd-mobile demo
2 |
3 | move to https://github.com/ant-design/antd-mobile-samples/tree/master/rn-web
4 |
--------------------------------------------------------------------------------
/snippets/service.js:
--------------------------------------------------------------------------------
1 | import xFetch from './xFetch';
2 |
3 | export async function __FUNC_NAME__() {
4 | return xFetch('/api/path');
5 | }
6 |
--------------------------------------------------------------------------------
/examples/local-iconfont/iconfont/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ant-design/antd-init/HEAD/examples/local-iconfont/iconfont/iconfont.eot
--------------------------------------------------------------------------------
/examples/local-iconfont/iconfont/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ant-design/antd-init/HEAD/examples/local-iconfont/iconfont/iconfont.ttf
--------------------------------------------------------------------------------
/examples/local-iconfont/iconfont/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ant-design/antd-init/HEAD/examples/local-iconfont/iconfont/iconfont.woff
--------------------------------------------------------------------------------
/examples/customize-antd-theme/theme.js:
--------------------------------------------------------------------------------
1 | module.exports = () => {
2 | return {
3 | 'primary-color': '#1DA57A',
4 | 'link-color': '#1DA57A',
5 | 'border-radius-base': '2px',
6 | };
7 | };
8 |
--------------------------------------------------------------------------------
/examples/local-iconfont/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(webpackConfig) {
2 | webpackConfig.babel.plugins.push(['import', {
3 | libraryName: 'antd',
4 | }]);
5 | return webpackConfig;
6 | };
7 |
--------------------------------------------------------------------------------
/snippets/reducer.js:
--------------------------------------------------------------------------------
1 | import { handleActions } from 'redux-actions';
2 |
3 | const __reducer_name__ = handleActions({
4 | ['action/type'](state, action) {
5 | return { ...state };
6 | },
7 | }, {
8 | initialStatePropExample: 1,
9 | });
10 |
11 | export default __reducer_name__;
12 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
15 | [Makefile]
16 | indent_style = tab
17 |
--------------------------------------------------------------------------------
/boilerplates/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Demo
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/snippets/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import styles from './__LAYOUT_NAME__.less';
3 |
4 | const __LAYOUT_NAME__ = ({ children }) => {
5 | return (
6 |
7 | {children}
8 |
9 | );
10 | };
11 |
12 | __LAYOUT_NAME__.propTypes = {};
13 |
14 | export default __LAYOUT_NAME__;
15 |
--------------------------------------------------------------------------------
/snippets/Component.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import styles from './__COMPONENT_NAME__.less';
3 |
4 | function __COMPONENT_NAME__(props) {
5 | return (
6 |
7 | __COMPONENT_NAME__
8 |
9 | );
10 | }
11 |
12 | __COMPONENT_NAME__.propTypes = {};
13 |
14 | export default __COMPONENT_NAME__;
15 |
--------------------------------------------------------------------------------
/boilerplates/demo/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Learn more on how to config.
2 | // - https://github.com/ant-tool/atool-build#配置扩展
3 |
4 | module.exports = function(webpackConfig) {
5 | webpackConfig.babel.plugins.push('transform-runtime');
6 | webpackConfig.babel.plugins.push(['import', {
7 | libraryName: 'antd',
8 | style: 'css',
9 | }]);
10 |
11 | return webpackConfig;
12 | };
13 |
--------------------------------------------------------------------------------
/examples/local-iconfont/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | antd demo
6 |
7 |
8 |
9 | antd demo
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/examples/build-antd-standalone/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | antd standalone demo
6 |
7 |
8 |
9 |
10 | antd standalone demo
11 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/examples/customize-antd-theme/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | antd demo
6 |
7 |
8 |
9 | antd demo
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/examples/local-iconfont/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.less';
4 | import { Icon, Button } from 'antd';
5 |
6 | const Demo = React.createClass({
7 | render() {
8 | return ;
9 | }
10 | });
11 |
12 | ReactDOM.render(, document.getElementById('container'));
13 |
--------------------------------------------------------------------------------
/examples/customize-antd-theme/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Learn more on how to config.
2 | // - https://github.com/ant-tool/atool-build#配置扩展
3 |
4 | module.exports = function(webpackConfig) {
5 | webpackConfig.babel.plugins.push('transform-runtime');
6 | webpackConfig.babel.plugins.push(['import', {
7 | libraryName: 'antd',
8 | style: true,
9 | }]);
10 |
11 | return webpackConfig;
12 | };
13 |
--------------------------------------------------------------------------------
/boilerplates/demo/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import { DatePicker } from 'antd';
5 |
6 | function App() {
7 | return (
8 |
9 |
AntDesign Demo
10 |
11 |
12 |
13 | );
14 | }
15 |
16 | ReactDOM.render(, document.getElementById('root'));
17 |
--------------------------------------------------------------------------------
/examples/build-antd-standalone/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(webpackConfig) {
2 | // Fix ie8 compatibility
3 | webpackConfig.module.loaders.unshift({
4 | test: /\.jsx?$/,
5 | loader: 'es3ify-loader',
6 | });
7 |
8 | // remove common.js
9 | if (webpackConfig.plugins[0].chunkNames === 'common') {
10 | webpackConfig.plugins.shift();
11 | }
12 |
13 | return webpackConfig;
14 | };
15 |
--------------------------------------------------------------------------------
/examples/build-antd-standalone/README.md:
--------------------------------------------------------------------------------
1 | # Build standalone antd
2 |
3 | > 本例适用于 `antd@0.12`，`antd@1.0` 已提供单独的构建文件。
4 |
5 | 构建独立的 antd.js 和 antd.css。
6 |
7 | ----
8 |
9 | ```bash
10 | $ npm install
11 | $ npm run build
12 | ```
13 |
14 | 然后构建后的文件为 `dist/antd.js` 和 `dist/antd.css`。
15 |
16 | 这样你可以和 react 一样通过脚本引入的方式使用 `antd`。
17 |
18 | ---
19 |
20 | 注意：`webpack.config.js` 中移除了 `babel-plugin-antd` 和 `CommonPlugin` 以满足单独构建的需求。
21 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # History
2 |
3 | ---
4 |
5 | ## 1.1.0
6 |
7 | - Upgrade antd to 1.1.0
8 | - Add redux boilplate, [!25](https://github.com/ant-design/antd-init/pull/25)
9 |
10 | ## 1.0.0
11 |
12 | - Upgrade antd to 1.0.0
13 |
14 | ## 0.8.0
15 |
16 | - 支持 CSS 的 livereload
17 |
18 | ## 0.7.0
19 |
20 | - 升级 dora 到 0.3，以及相应插件的升级，详见：https://github.com/dora-js/dora/issues/26
21 | - 升级 atool-build 到 0.6，详见：https://github.com/ant-tool/atool-build/issues/61
22 |
23 | ## 0.1.0
24 |
25 | 初始版本
26 |
27 |
--------------------------------------------------------------------------------
/snippets/Container.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import styles from './__COMPONENT_NAME__.less';
4 |
5 | function __COMPONENT_NAME__(props) {
6 | return (
7 |
8 | __COMPONMENT_NAME__
9 |
10 | );
11 | }
12 |
13 | __COMPONENT_NAME__.propTypes = {};
14 |
15 | function mapStateToProps(state) {
16 | return {};
17 | }
18 |
19 | export default connect(mapStateToProps)(__COMPONENT_NAME__);
20 |
--------------------------------------------------------------------------------
/snippets/saga.js:
--------------------------------------------------------------------------------
1 | import { takeEvery, takeLatest } from 'redux-saga';
2 | import { take, call, put, fork, cancel, select } from 'redux-saga/effects';
3 | import { message } from 'antd';
4 |
5 | function __TASK_NAME__() {
6 | try {
7 | //yield call();
8 | //yield select();
9 | //yield put();
10 | } catch(e) {
11 | message.error(e);
12 | }
13 | }
14 |
15 | function* taskWatcher() {
16 | yield takeLatest('action/type', __TASK_NAME__);
17 | }
18 |
19 | export default function* () {
20 | yield fork(taskWatcher);
21 | }
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | tmp
4 | node_modules
5 | examples/**/dist
6 | boilerplate/dist
7 | *.log
8 | yarn.lock
9 |
10 | boilerplates/MobileDemo/ios/build
11 | boilerplates/MobileDemo/ios/bundle
12 | boilerplates/MobileDemo/android/bundle
13 | boilerplates/MobileDemo/android/.gradle
14 | boilerplates/MobileDemo/android/app/build
15 | boilerplates/MobileDemo/android/build
16 | boilerplates/MobileDemo/android/local.properties
17 | boilerplates/MobileDemo/android/app/src/main/assets
18 | boilerplates/MobileDemo/android/app/src/main/res/drawable*
19 | xcuserdata
20 |
--------------------------------------------------------------------------------
/snippets/reducerWithComposition.js:
--------------------------------------------------------------------------------
1 | import { handleActions } from 'redux-actions';
2 | import { combineReducer } from 'redux';
3 |
4 | const __reducer_a__ = handleActions({
5 | ['action/type'](state, action) {
6 | return { ...state };
7 | },
8 | }, {
9 | initialStatePropExample: 1,
10 | });
11 |
12 | const __reducer_b__ = handleActions({
13 | ['action/type'](state, action) {
14 | return { ...state };
15 | },
16 | }, {
17 | initialStatePropExample: 1,
18 | });
19 |
20 | export default combineReducer({
21 | __reducer_a__,
22 | __reducer_b__,
23 | });
24 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "expr": true,
3 | "eqeqeq": true,
4 | "eqnull": true,
5 | "indent": 2,
6 | "latedef": "nofunc",
7 | "newcap": true,
8 | "quotmark": true,
9 | "trailing": true,
10 | "undef": true,
11 | "unused": true,
12 | "lastsemic": true,
13 | "boss": true,
14 | "funcscope": true,
15 | "loopfunc": true,
16 | "smarttabs": true,
17 | "sub": true,
18 | "strict": true,
19 | "node": true,
20 | "esnext": true,
21 | "globals": {
22 | "describe": false,
23 | "xdescribe": false,
24 | "it": false,
25 | "xit": false,
26 | "before": false,
27 | "beforeEach": false,
28 | "after": false,
29 | "afterEach": false,
30 | "define": false
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "antd-init",
3 | "version": "2.0.7",
4 | "description": "Ant Design boilerplate generator.",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/ant-design/antd-init"
8 | },
9 | "homepage": "https://github.com/ant-design/antd-init",
10 | "mail": "chencheng ",
11 | "license": "MIT",
12 | "bin": {
13 | "antd-init": "./bin/antd-init"
14 | },
15 | "scripts": {
16 | "test": "mocha --no-timeouts"
17 | },
18 | "dependencies": {
19 | "inquirer": "^1.0.0",
20 | "through2": "2.0.x",
21 | "vinyl-fs": "^2.4.3",
22 | "which": "1.2.x"
23 | },
24 | "devDependencies": {
25 | "coffee": "^3.2.1",
26 | "mocha": "2",
27 | "rimraf": "^2.5.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/examples/build-antd-standalone/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "entry": {
3 | "antd": "./index.jsx"
4 | },
5 | "dependencies": {
6 | "antd": "0.12.x",
7 | "atool-build": "0.6.x",
8 | "babel-plugin-antd": "0.2.x",
9 | "es3ify-loader": "^0.1.0",
10 | "react": "0.14.x",
11 | "react-dom": "0.14.x"
12 | },
13 | "devDependencies": {
14 | "dora": "0.3.x",
15 | "dora-plugin-webpack": "0.6.x",
16 | "dora-plugin-hmr": "0.5.x",
17 | "dora-plugin-livereload": "0.3.x",
18 | "dora-plugin-proxy": "0.6.x",
19 | "eslint": "2.x",
20 | "eslint-config-airbnb": "6.x",
21 | "eslint-plugin-react": "4.x",
22 | "pre-commit": "1.x",
23 | "babel-eslint": "^6.0.0"
24 | },
25 | "pre-commit": [
26 | "lint"
27 | ],
28 | "scripts": {
29 | "dev": "dora -p 8001 --plugins webpack,hmr,proxy,livereload?enableJs=false",
30 | "lint": "eslint --ext .js,.jsx src",
31 | "build": "atool-build -o ./dist/"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/examples/local-iconfont/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "entry": {
4 | "index": "./index.jsx"
5 | },
6 | "dependencies": {
7 | "antd": "2.x",
8 | "react": "^15.1.0",
9 | "react-dom": "^15.1.0"
10 | },
11 | "devDependencies": {
12 | "atool-build": "^0.9.0",
13 | "atool-test-mocha": "^0.1.4",
14 | "babel-eslint": "^7.0.0",
15 | "babel-plugin-import": "^1.0.1",
16 | "babel-plugin-transform-runtime": "^6.8.0",
17 | "babel-runtime": "^6.9.2",
18 | "dora": "0.4.x",
19 | "dora-plugin-webpack": "^0.8.1",
20 | "eslint": "^3.8.1",
21 | "eslint-config-airbnb": "^14.0.0",
22 | "eslint-plugin-import": "^2.2.0",
23 | "eslint-plugin-jsx-a11y": "^3.0.2",
24 | "eslint-plugin-react": "^6.9.0",
25 | "expect": "^1.20.1",
26 | "pre-commit": "1.x",
27 | "redbox-react": "^1.2.6"
28 | },
29 | "pre-commit": [
30 | "lint"
31 | ],
32 | "scripts": {
33 | "build": "atool-build",
34 | "lint": "eslint --ext .js,.jsx src/",
35 | "start": "dora --plugins webpack",
36 | "test": "atool-test-mocha ./**/__tests__/*-test.js"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/boilerplates/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "entry": {
4 | "index": "./index.js"
5 | },
6 | "dependencies": {
7 | "antd": "^3.0.0",
8 | "moment": "^2.19.3",
9 | "react": "^16.2.0",
10 | "react-dom": "^16.2.0"
11 | },
12 | "devDependencies": {
13 | "atool-build": "^0.9.0",
14 | "atool-test-mocha": "^0.1.4",
15 | "babel-eslint": "^7.0.0",
16 | "babel-plugin-import": "^1.0.1",
17 | "babel-plugin-transform-runtime": "^6.8.0",
18 | "babel-runtime": "^6.9.2",
19 | "dora": "0.4.x",
20 | "dora-plugin-webpack": "^0.8.1",
21 | "eslint": "^3.8.1",
22 | "eslint-config-airbnb": "^12.0.0",
23 | "eslint-plugin-import": "^2.0.1",
24 | "eslint-plugin-jsx-a11y": "^2.2.3",
25 | "eslint-plugin-react": "^6.4.1",
26 | "expect": "^1.20.1",
27 | "pre-commit": "1.x",
28 | "redbox-react": "^1.2.6"
29 | },
30 | "pre-commit": [
31 | "lint"
32 | ],
33 | "scripts": {
34 | "build": "atool-build",
35 | "lint": "eslint --ext .js,.jsx src/",
36 | "start": "dora --plugins webpack",
37 | "test": "atool-test-mocha ./**/__tests__/*-test.js"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/examples/customize-antd-theme/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "entry": {
4 | "index": "./index.jsx"
5 | },
6 | "dependencies": {
7 | "antd": "^2.1.0",
8 | "react": "^15.1.0",
9 | "react-dom": "^15.1.0"
10 | },
11 | "devDependencies": {
12 | "atool-build": "^0.9.0",
13 | "atool-test-mocha": "^0.1.4",
14 | "babel-eslint": "^7.0.0",
15 | "babel-plugin-import": "^1.0.1",
16 | "babel-plugin-transform-runtime": "^6.8.0",
17 | "babel-runtime": "^6.9.2",
18 | "dora": "0.4.x",
19 | "dora-plugin-webpack": "^0.8.1",
20 | "eslint": "^3.8.1",
21 | "eslint-config-airbnb": "^14.0.0",
22 | "eslint-plugin-import": "^2.2.0",
23 | "eslint-plugin-jsx-a11y": "^3.0.2",
24 | "eslint-plugin-react": "^6.9.0",
25 | "expect": "^1.20.1",
26 | "pre-commit": "1.x",
27 | "redbox-react": "^1.2.6"
28 | },
29 | "pre-commit": [
30 | "lint"
31 | ],
32 | "scripts": {
33 | "build": "atool-build",
34 | "lint": "eslint --ext .js,.jsx src/",
35 | "start": "dora --plugins webpack",
36 | "test": "atool-test-mocha ./**/__tests__/*-test.js"
37 | },
38 | "theme": "./theme.js"
39 | }
40 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # antd-init
2 |
3 | [](https://npmjs.org/package/antd-init)
4 |
5 | [Ant Design](https://github.com/ant-design/ant-design) demo tool.
6 |
7 | ----
8 |
9 | ## ⚠️⚠️⚠️ antd-init@2 is for demo only. If you want to create projects, it's better to init with [create-umi](https://github.com/umiji/create-umi).
10 |
11 | [umi](http://umijs.org/) is a routing-based framework that supports next.js-like conventional routing and various advanced routing functions, such as routing-level on-demand loading. With a complete plugin system that covers every life cycle from source code to build product, umi is able to support various functional extensions and business needs.
12 |
13 | ## ⚠️⚠️⚠️ antd-init@2 仅适用于 demo，如果你要开发项目，推荐使用 [create-umi](https://github.com/umiji/create-umi)。
14 |
15 | [umi](http://umijs.org/) 是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
16 |
17 | ## Install
18 |
19 | ```bash
20 | $ npm i antd-init -g
21 | ```
22 |
23 | ## Usage
24 |
25 | Generate demo boilerplate.
26 |
27 | ```bash
28 | $ mkdir foo && cd foo
29 | $ antd-init
30 | ```
31 |
32 | Start development server.
33 |
34 | ```bash
35 | $ npm start
36 | ```
37 |
38 | Build.
39 |
40 | ```bash
41 | $ npm run build
42 | ```
43 |
--------------------------------------------------------------------------------
/bin/antd-init:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | var vfs = require('vinyl-fs');
4 | var fs = require('fs');
5 | var through = require('through2');
6 | var path = require('path');
7 | var inquirer = require('inquirer');
8 | var join = path.join;
9 | var basename = path.basename;
10 |
11 | if (process.argv.length === 3 &&
12 | (process.argv[2] === '-v' || process.argv[2] === '--version')) {
13 | console.log(require('../package').version);
14 | return;
15 | }
16 |
17 | init('demo');
18 |
19 | function init(type) {
20 | var cwd = join(__dirname, '../boilerplates', type);
21 | var dest = process.cwd();
22 |
23 | vfs.src(['**/*', '!node_modules/**/*'], {cwd: cwd, cwdbase: true, dot: true})
24 | .pipe(template(dest))
25 | .pipe(vfs.dest(dest))
26 | .on('end', function() {
27 | fs.renameSync(path.join(dest,'gitignore'),path.join(dest,'.gitignore'));
28 | require('../lib/install');
29 | })
30 | .resume();
31 | }
32 |
33 | function template(dest) {
34 | return through.obj(function (file, enc, cb) {
35 | if (!file.stat.isFile()) {
36 | return cb();
37 | }
38 |
39 | console.log('Write %s', simplifyFilename(join(dest, basename(file.path))));
40 | this.push(file);
41 | cb();
42 | });
43 | }
44 |
45 | function simplifyFilename(filename) {
46 | return filename.replace(process.cwd(), ".");
47 | }
48 |
--------------------------------------------------------------------------------
/lib/install.js:
--------------------------------------------------------------------------------
1 | function runCmd(cmd, args, fn) {
2 | args = args || [];
3 | var runner = require('child_process').spawn(cmd, args, {
4 | // keep color
5 | stdio: "inherit"
6 | });
7 | runner.on('close', function (code) {
8 | if (fn) {
9 | fn(code);
10 | }
11 | });
12 | }
13 |
14 | var which = require('which');
15 | var npms = ['tnpm', 'cnpm', 'npm'];
16 |
17 | function findNpm() {
18 | for (var i = 0; i < npms.length; i++) {
19 | try {
20 | which.sync(npms[i]);
21 | console.log('use npm: ' + npms[i]);
22 | return npms[i];
23 | } catch (e) {
24 |
25 | }
26 | }
27 | throw new Error('please install npm');
28 | }
29 |
30 | var npm = findNpm();
31 |
32 | runCmd(which.sync(npm), ['install'], function () {
33 | console.log(npm + ' install end');
34 | console.log();
35 | console.log('---');
36 | console.log();
37 | console.log('antd-init@2 仅适用于学习和体验 antd，如果你要开发项目，推荐使用 create-umi 进行项目初始化。umi 是一个可插拔的企业级 React 前端应用框架，已在生产环境广泛应用。');
38 | console.log('antd-init@2 is only for experience antd. If you want to create projects, it\'s better to init with create-umi. umi is a pluggable enterprise-level react application framework.');
39 | console.log();
40 | console.log('Usage:');
41 | console.log();
42 | console.log('mkdir myapp && cd myapp');
43 | console.log('yarn create umi');
44 | console.log();
45 | console.log('Visit https://github.com/umijs/create-umi/ to learn more.');
46 | });
47 |
--------------------------------------------------------------------------------
/test/index-spec.js:
--------------------------------------------------------------------------------
1 | var coffee = require('coffee');
2 | var join = require('path').join;
3 | var mkdirSync = require('fs').mkdirSync;
4 | var binPath = join(__dirname, '../bin/antd-init');
5 | var rimraf = require('rimraf');
6 |
7 | describe('antd-init', function() {
8 | var tmpPath = join(__dirname, 'tmp');
9 | var cwd = process.cwd();
10 |
11 | before(function() {
12 | mkdirSync(tmpPath);
13 | process.chdir(tmpPath);
14 | });
15 |
16 | after(function() {
17 | rimraf.sync(tmpPath);
18 | process.chdir(cwd);
19 | });
20 |
21 | it('init', function(done) {
22 | coffee
23 | .spawn(binPath)
24 | .expect('stdout', [/Write \.\/index\.jsx/, /npm install end/])
25 | //.expect('stderr', '')
26 | .debug()
27 | .end(done);
28 | });
29 |
30 | it('run build', function(done) {
31 | coffee.spawn('npm', 'run build'.split(' '))
32 | .expect('stdout', [/extract-text-webpack-plugin/, /Time:/, /Hash:/])
33 | .expect('stderr', '')
34 | .debug()
35 | .end(done);
36 | });
37 |
38 | it('run dev', function(done) {
39 | // 由于 npm run 不会透传 signal, 这里直接引 bin 文件
40 | var doraPath = join(__dirname, './tmp/node_modules/.bin/dora');
41 | var c = coffee.spawn(doraPath, '-p 8001 --plugins atool-build,proxy,hmr'.split(' '))
42 | .expect('stdout', [/proxy: listened on/, /dora: listened on 8001/, /webpack: bundle build is now finished\./])
43 | .expect('stderr', '')
44 | .debug()
45 | .end(done);
46 |
47 | setTimeout(function() {
48 | c.proc.kill();
49 | }, 20000);
50 | });
51 | });
52 |
--------------------------------------------------------------------------------
/examples/local-iconfont/README.md:
--------------------------------------------------------------------------------
1 | **⚠️⚠️⚠️ antd@3.9.0+ 之后图标采用 svg 实现，不再从远程加载字体图标，本文仅针对之前的版本有效。**
2 |
3 | ---
4 |
5 | # 本地部署 Iconfont
6 |
7 | Ant Design 默认的 iconfont 文件托管在 [iconfont.cn](http://iconfont.cn/) 并默认使用平台提供的 alicdn 地址，公网可访问使用。
8 |
9 | 由于 alicdn 对部分域名有[访问限制](https://github.com/ant-design/ant-design/issues/1070)，或者需要内网环境使用，您可以参照这个例子将 iconfont 文件部署到本地。
10 |
11 | ## 演示
12 |
13 | ```bash
14 | $ npm install
15 | $ npm start
16 | ```
17 |
18 | 然后访问 http://127.0.0.1:8989/。
19 |
20 | 最新的 iconfont 文件可以到 [此链接](https://ant.design/docs/spec/download-cn) 下载。
21 |
22 | > 如果使用 `package.theme` 来自定义 iconfont 的路径无效，可以参考[这个解决方案](https://github.com/visvadw/dvajs-user-dashboard/pull/2)。
23 |
24 | ---
25 |
26 | # Local hosted Iconfont
27 |
28 | **⚠️⚠️⚠️ We implement Icons by svg After antd@3.9.0+ instead font icon.**
29 |
30 | Follow this repo to host iconfont in your local environment.
31 |
32 | Iconfont files is hosted at [iconfont.cn](http://iconfont.cn/) defaultly, you can use it for free.
33 |
34 | Due to [some domain restriction issues](https://github.com/ant-design/ant-design/issues/1070), or for network speed.
35 | You can follow this repo to host iconfont files in your local development environment.
36 |
37 | ## Demo
38 |
39 | ```bash
40 | $ npm install
41 | $ npm start
42 | ```
43 |
44 | Then visit http://127.0.0.1:8989/ .
45 |
46 | Latest Iconfont files of Ant Design can be downloaded here: https://ant.design/docs/spec/download
47 |
48 | > If it is not working when you use `package.theme` way to customize iconfont path, you could check [this solution](https://github.com/visvadw/dvajs-user-dashboard/pull/2).
49 |
--------------------------------------------------------------------------------
/examples/customize-antd-theme/README.md:
--------------------------------------------------------------------------------
1 | # 修改 Ant Design 的样式变量
2 |
3 | 本文内容可能过时，优先阅读官网文档：https://ant.design/docs/react/customize-theme-cn
4 |
5 | ---
6 |
7 | > 适用于 `antd@>=1.0.0`/`antd-mobile@>=0.9.0`。
8 |
9 | 所有样式变量可以在
10 | [antd](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) /
11 | [antd-mobile](https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less)
12 | 里找到。
13 |
14 | ----
15 |
16 | ## 查看演示
17 |
18 | ```bash
19 | $ npm install
20 | $ npm start
21 | ```
22 |
23 | 然后访问 http://127.0.0.1:8989/。
24 |
25 | ## 颜色配置方式
26 |
27 | 有两种方案，选择一种即可。
28 |
29 | ### 方案一（推荐）
30 |
31 | 配置在 `package.json` 下的 `theme` 字段。theme 可以为配置为对象或文件路径。
32 |
33 | ```js
34 | "theme": {
35 | "primary-color": "#1088ae",
36 | },
37 | // 或
38 | "theme": "./theme.js",
39 | ```
40 |
41 | 需要配合 atool-build 使用（antd-init 和 dva-cli 均支持）。如果你使用的是其他脚手架，可以参考 [atool-build 中 less-loader 的 webpack 相关配置 ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138)，利用 `modifyVars` 配置覆盖原来的样式变量。
42 |
43 | > 注意，样式必须加载 less 。保持 `babel-plugin-import` 的 style 属性配置为 `true`。
44 |
45 | #### lessToJs
46 |
47 | 想直接使用正常的 theme.less 文件，可以自己通过类似 [less-vars-to-js](https://www.npmjs.com/package/less-vars-to-js)
48 | 的工具读取 less 文件变量，再自己设置 `modifyVars` 即可，示例如下：
49 |
50 | ```js
51 | const lessToJs = require('less-vars-to-js');
52 |
53 | const themer = lessToJs(fs.readFileSync(path.join(__dirname, './alipay-theme/theme.less'), 'utf8'));
54 | webpackConfig.module.loaders.forEach(function(loader) {
55 | if (loader.test.toString() === '/\\.less$/') {
56 | loader.loader =
57 | loader.loader.replace('"modifyVars":{}', '"modifyVars":' + JSON.stringify(themer));
58 | }
59 | });
60 | ```
61 |
62 | ### 方案二
63 |
64 | 建立一个单独的 `less` 文件如下，再引入这个文件。
65 |
66 | ```css
67 | @import "~antd/dist/antd.less";
68 | @import "your-theme-file"; // 用于覆盖上面定义的变量
69 | ```
70 |
71 | > 注意：这种方式的缺点会载入所有组件的样式，无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
72 |
--------------------------------------------------------------------------------
/examples/customize-antd-theme/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, message, Row, Col } from 'antd';
4 | const FormItem = Form.Item;
5 | const Option = Select.Option;
6 |
7 | const Demo = React.createClass({
8 | getInitialState() {
9 | return {
10 | formData: {
11 | inputNumber: undefined,
12 | static: '唧唧复唧唧木兰当户织呀',
13 | switch: undefined,
14 | slider: undefined,
15 | select: undefined,
16 | startDate: undefined,
17 | endDate: undefined,
18 | }
19 | };
20 | },
21 |
22 | render() {
23 | return (
24 |
83 | );
84 | }
85 | });
86 |
87 | ReactDOM.render(, document.getElementById('container'));
88 |
--------------------------------------------------------------------------------
/examples/local-iconfont/iconfont/iconfont.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
733 |
--------------------------------------------------------------------------------