ant-design / antd-init

:beginner: Ant Design boilerplate generator.

antd-init

Ant Design demo tool.

---

⚠️⚠️⚠️ antd-init@2 is for demo only. If you want to create projects, it's better to init with create-umi.

umi 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.

⚠️⚠️⚠️ antd-init@2 仅适用于 demo，如果你要开发项目，推荐使用 create-umi。

umi 是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Install

$ npm i antd-init -g

Usage

Generate demo boilerplate.

$ mkdir foo && cd foo
$ antd-init

Start development server.

$ npm start

Build.

$ npm run build

antd-init's Issues

TypeError: Cannot read property 'presets' of undefined when start

antd-bulid升级到0.7.5后
getWebpackCommonConfig.js中的module -> loader: 'babel' 没有query属性，造成
${PROJECT}/node_modules/dora-plugin-hmr/lib/index.js:72
loader.query.presets.push('react-hmre');
^

TypeError: Cannot read property 'presets' of undefined

antd-int指令出错

/usr/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js:17
const debug = require('debug')('npminstall:bin:install');
^^^^^
SyntaxError: Use of const in strict mode.
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:929:3

after init can't use

➜ dora --plugins proxy,atool-build,hmr
/usr/local/lib/node_modules/dora/node_modules/composition/index.js:111
function* promiseToGenerator(promise) {
        ^
SyntaxError: Unexpected token *
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/dora/node_modules/koa/lib/application.js:10:19)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

删除 babel-eslint

• https://twitter.com/geteslint/status/714642903482564608
• http://eslint.org/blog/2016/03/eslint-v2.3.0-released

按照教程生成项目，运行时报错

win10 x64，nodejs 4.4.4，使用cnpm，antd-init 1.1.1

生成时选择 plain react - for simple project

运行时出现下面的异常
C:\MY_TEMP\antd\node_modules.npminstall\dora\0.3.2\dora\lib\plugin.js:83
throw new Error('[Error] ' + pluginName + ' not found in ' + resolveDir);
^

Error: [Error] 'webpack not found in C:\MY_TEMP\antd
at resolvePlugin (C:\MY_TEMP\antd\node_modules.npminstall\dora\0.3.2\dora\lib\plugin.js:83:15)
at C:\MY_TEMP\antd\node_modules.npminstall\dora\0.3.2\dora\lib\plugin.js:102:12
at Array.map (native)
at resolvePlugins (C:\MY_TEMP\antd\node_modules.npminstall\dora\0.3.2\dora\lib\plugin.js:101:22)
at createServer (C:\MY_TEMP\antd\node_modules.npminstall\dora\0.3.2\dora\lib\index.js:61:44)
at Object. (C:\MY_TEMP\antd\node_modules.npminstall\dora\0.3.2\dora\bin\dora:32:20)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)

生成的dist目录生成错误

win7系统当我执行npm run build的时候生成的dist目录下生成的目录是${npm_package_family},${npm_package_name},没有自动读取package.json下的配置，这是为啥?是不是环境配置不对?下面的文件是生成的，但是文件夹名字不对

antd-init 安装好后无法运行

安装之后 生产环境奔溃 可以的 支持支持

antd-init执行失败

这个操作是在干嘛，一直在转圈，耗时非常久。

1358 error Expected: a7346fb20ce9eb1d77c77e48dd8f53c9a80ce48d
1358 error Actual:   6007042cb25fcaae45626d31aeae38d2b974602b
1358 error From:     https://registry.npmjs.org/reqwest-without-xhr2/-/reqwest-without-xhr2-2.0.2.tgz
1359 error If you need help, you may report this error at:
1359 error     <https://github.com/npm/npm/issues>
1360 verbose exit [ 1, true ]
1361 verbose unbuild node_modules\antd
1362 info preuninstall [email protected]
1363 info uninstall [email protected]
1364 verbose unbuild rmStuff [email protected] from D:\git\ant\node_modules
1365 info postuninstall [email protected]
1366 silly gentlyRm D:\git\ant\node_modules\antd is being purged from base D:\git\ant
1367 verbose gentlyRm don't care about contents; nuking D:\git\ant\node_modules\antd
1368 silly vacuum-fs purging D:\git\ant\node_modules\antd
1369 silly vacuum-fs quitting because other entries in D:\git\ant\node_modules

生成环境开启 babel 插件进行性能优化

• https://babeljs.io/docs/plugins/transform-react-constant-elements/
• https://babeljs.io/docs/plugins/transform-react-inline-elements/
• https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types

如何动态的修改antd的主题颜色？

比如说 网站上选中一种颜色点击保存就能修改网站颜色。
是生成很多 不同css样式呢
还是可以直接通过webpack server？

IE 下 css 大小 不能超过 288kb

IE 下 css 大小 不能超过 288kb，实际上超过240k后都有些问题，要做拆分 css 压缩了。

脚手架在 IE8 下无法运行

去掉了所有的前端依赖也无法运行。。

至少提供一个 examples 用于 IE8 的调试配置。

关于浏览器调试的问题？

你好，我的工程师通过antd-init创建的。如上图，我在浏览器里调试时看到的js代码。有localhost:8989下的打包为单文件的index.js，也有webpack://下的src，但src下的文件是经过babel转过的。

我是新手，请问：要怎么做，才能在浏览器上直接调试es6的代码？

这周项目重新下载以后，install后运行报这个错，上周的时候是正常的啊

E:\react\20160527\node_modules\dora-plugin-hmr\lib\index.js:72
loader.query.presets.push('react-hmre');
^

TypeError: Cannot read property 'presets' of undefined
at E:\react\20160527\node_modules\dora-plugin-hmr\lib\index.js:72:21
at Array.forEach (native)
at Object.webpackUpdateConfigFinally (E:\react\20160527\node_modules\dora-plugin-hmr\lib\index.js:70:34)
at ret (E:\react\20160527\node_modules\dora\lib\plugin.js:140:29)
at run (E:\react\20160527\node_modules\dora\lib\reduceAsync.js:21:5)
at next (E:\react\20160527\node_modules\dora\lib\reduceAsync.js:14:14)
at iteratorCallback (E:\react\20160527\node_modules\dora\lib\reduceAsync.js:23:7)
at ret (E:\react\20160527\node_modules\dora\lib\plugin.js:113:23)
at run (E:\react\20160527\node_modules\dora\lib\reduceAsync.js:21:5)
at reduceAsync (E:\react\20160527\node_modules\dora\lib\reduceAsync.js:27:10)

dora-plugin-livereload set injectHost to 127.0.0.1

hmr is fail

process-update.js:59 [HMR] The following modules couldn't be hot updated: (Full reload needed)
process-update.js:64 [HMR]  - ./src/component/App.jsx

Object function Object() { [native code] } has no method 'assign'

使用antd-init整合redux时候抛出这样的异常。。。
Object function Object() { [native code] } has no method 'assign'
不管是npm run dev还是rpm run build命令都一样有这个问题。
dev下查看生成的index.js中，也有这样的代码：
module.exports = Object.assign || function (target, source) {...}

不知道问题出在哪里了。。。

support antd-init update

https://facebook.github.io/react-native/docs/upgrading.html#content

This will check your files against the latest template and perform the following:

If there is a new file in the template, it is simply created.
If a file in the template is identical to your file, it is skipped.
If a file is different in your project than the template, you will be prompted; you have options to view a diff between your file and the template file, keep your file or overwrite it with the template version. If you are unsure, press h to get a list of possible commands.

npm ERR! peerinvalid Peer [email protected] wants react@^15.0.2

npm ERR! peerinvalid Peer [email protected] wants react@^15.0.2

生成的dist文件中不包含html文件，你们怎么解决的

build处理后生成的dist文件里有一个map.json文件，你们是怎么将映射写入html的？

增加 lint + travis 机制

按照教程一步一步来，当运行npm run dev时...

请问一下antd的icon图标怎么本地部署呢?

给的示例根本看不懂,希望可以说的详细一点,谢谢了!

构建后的antd.js和antd.css怎么引入已有项目呢?

你好,请问一下用你们的antd-init/examples/build-antd-standalone/构建出来的antd.js和antd.css怎么引入已有项目呢?

antd-init WARN and ERROR

use npm: npm
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm ERR! fetch failed https://registry.npmjs.org/dora-plugin-proxy/-/dora-plugin-proxy-0.5.3.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 504
npm ERR! fetch failed https://registry.npmjs.org/dora-plugin-proxy/-/dora-plugin-proxy-0.5.3.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 504
npm ERR! fetch failed https://registry.npmjs.org/dora-plugin-proxy/-/dora-plugin-proxy-0.5.3.tgz
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\develop_tools\\nodejs\\node.exe" "D:\\develop_tools\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v5.7.0
npm ERR! npm  v3.6.0

npm ERR! fetch failed with status code 504
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     D:\doc\study\webStorm\ant-design\npm-debug.log
npm install end

Compass的话 如何解决

Compass的话 如何解决

修改less，但是没有自动刷新页面

在页面中我导入了自己的less文件，但是修改less页面没有自动刷新，控制台提示：

livereload: livereload changed index.css
webpack built 5a4efa59a7bb2283f961 in 547ms

如何让它在我修改less后，自动刷新页面。

模块的依赖版本有冲突

[fsevents] Success: "/Users/black/Projects/hospital/node_modules/atool-build/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v14-darwin-x64/fse.node" is installed via remote
npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/lib/node_modules/cnpm/node_modules/.bin/npm" "--userconfig=/Users/black/.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--cache=/Users/black/.cnpm" "--registry=https://registry.npm.taobao.org" "--node-gyp=/usr/local/lib/node_modules/cnpm/node_modules/pangyp/bin/node-gyp.js" "install"
npm ERR! node v0.12.4
npm ERR! npm  v2.7.6
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package atool-build does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants atool-build@^0.3.1
npm ERR! peerinvalid Peer [email protected] wants atool-build@^0.4.2

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/black/Projects/hospital/npm-debug.log
cnpm install end

本机的环境版本如下：

➜  hospital  cnpm -v
3.0.2
➜  hospital  node -v
v0.12.4
➜  hospital  npm -v
2.10.1

nvm 切换到 Node v4.2.3 以后，报错依旧，这种冲突有什么建议么？

修改主题时，按第三种方法失败

@sorrycc
修改主题，按第三种方法，

index.less:
@import "~antd/lib/style/themes/default.less";
@import "your-theme-file"; // 变量文件
@import "~antd/lib/style/core/index.less";
@import "~antd/lib/style/components.less";

失败，总是报错，错误如下：
ERROR in ./src/entries/index.less
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../../node_modules/antd/lib/style/core/~normalize.css/normalize.css in /Users/liujihong/Documents/ant-simple/src/entries
at /Users/liujihong/Documents/ant-simple/node_modules/webpack/lib/Compilation.js:229:38
at onDoneResolving (/Users/liujihong/Documents/ant-simple/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
at /Users/liujihong/Documents/ant-simple/node_modules/webpack/lib/NormalModuleFactory.js:85:20
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:726:13
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:52:16
at done (/Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:241:17)
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:44:16
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:723:17
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:167:37
at /Users/liujihong/Documents/ant-simple/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
@ ./src/entries/index.js 5:0-23

Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.16 MB [rendered]
[0] .//css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!.//postcss-loader!.//less-loader?{"sourceMap":true,"modifyVars":{}}!./src/entries/index.less 1.16 MB {0} [built] [1 error]
[6] .//css-loader/lib/css-base.js 1.51 kB {0}

ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./~/less-loader?{"sourceMap":true,"modifyVars":{}}!./src/entries/index.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../../node_modules/antd/lib/style/core/~normalize.css/normalize.css in /Users/liujihong/Documents/ant-simple/src/entries
 @ ./~/css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./~/less-loader?{"sourceMap":true,"modifyVars":{}}!./src/entries/index.less 3:10-190

没有更新版本的时候，这个方法是可行的。更新到1.1版本后，文档没有更新，按这种方法就失败了，请指点

默认生成的代码，不符合 eslint 的检测

在IE8下，使用 atool 构建出的 common.js 存在兼容性问题

使用server的时候，IE下没有兼容性问题，但是走构建dist资源，IE8下存在兼容性问题。

报错提示：

antd 1.0Beta版，样式覆盖报错

https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme

antd 版本1.0.0-beta.9，按上述文档最后一条“样式覆盖”来操作，会有报错。v0.12没问题。

ERROR in ./src/component/AntdPatch.less
Module build failed: ModuleBuildError: Module build failed: Cannot resolve module 'antd/style/core/index.less' in /Users/Stella/workspace/simple-process/src/component
@ /Users/Stella/workspace/simple-process/src/component/AntdPatch.less (line 16, column 0)
near lines:

@import "~antd/style/core/index.less";

at DependenciesBlock.onModuleBuildFailed (/Users/Stella/workspace/simple-process/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
at nextLoader (/Users/Stella/workspace/simple-process/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
at /Users/Stella/workspace/simple-process/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at context.callback (/Users/Stella/workspace/simple-process/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at /Users/Stella/workspace/simple-process/node_modules/less-loader/index.js:68:16
at /Users/Stella/workspace/simple-process/node_modules/less/lib/less/render.js:26:35
at /Users/Stella/workspace/simple-process/node_modules/less/lib/less/parse.js:62:33
at Object.finish [as _finish] (/Users/Stella/workspace/simple-process/node_modules/less/lib/less/parser/parser.js:180:28)
at Object.ImportVisitor._onSequencerEmpty (/Users/Stella/workspace/simple-process/node_modules/less/lib/less/visitors/import-visitor.js:35:14)
at ImportSequencer.tryRun (/Users/Stella/workspace/simple-process/node_modules/less/lib/less/visitors/import-sequencer.js:50:14)

@ ./src/component/SignStep0.jsx 19:0-27

添加 redux 开发者工具

https://github.com/zalmoxisus/redux-devtools-extension

https://github.com/davezuko/react-redux-starter-kit/blob/fedfd79f0795cb0aa561424d28ce3334be3e878b/src/main.js#L31

运行antd-init报错

在新建项目，运行antd-init命令后，控制台报错
“node-pre-gyp http 404 https://npm.taobao.org/mirrors/fsevents/v1.0.11/fse-v1.0.11-node-v47-win32-x64.tar.gz”
在浏览器中访问https://npm.taobao.org/mirrors/fsevents/v1.0.11/，看到下面是没有win32-x64这样的文件的，只有“darwin-x64.tar.gz”

这样的报错有影响吗？

Error: Cannot find module 'babel-polyfill'

执行npm run start时，报错：
Error: Cannot find module 'babel-polyfill'
请问是什么原因？

Pagination中的showQuickJumper是怎么用的？

http://ant.design/#/components/pagination
示例里只提到怎么添加，没有提到怎么使用，这个东西不会只能看看吧

add es6-shim

既然 facebook 那边已经开始使用 es6-shim，antd 这边也跟上如何？

https://facebook.github.io/draft-js/docs/advanced-topics-issues-and-pitfalls.html#polyfills

打包单独的 antd 用 script 的方式引入后，报错

报错：
react.js:18354 Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.
警告：（下面的警告出现多次）
react.js:18798 Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead
react.js:18798 Warning: getInitialState was defined on Dropdown, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

---

使用webpack import 的方式，不会报错和警告

hmr 失败

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
process-update.js:69 
[HMR]  - ./src/component/App.jsx

当我修改文件后不能热加载。
App.jsx 做了如下修改

const App = () =><div>我是小河流1<DatePicker /></div>;
export default App;

添加 .editorconfig

RT

feat: support TypeScript

After user select "plain react" or "redux", prompt and ask user to select programming language, "ES2015" or "TypeScript".

Plan: rewrite boilerplates into TypeScript. Compile *.tsx to*.jsx or just use *.jsx file, according to user's selection.

Will work on it after #25 is merged.

使用构建参数 --hash，遇到一个问题

想请教下，在 atool-build 中，使用构建参数 --hash，构建完以后，静态资源都命名已经改变，对应的页面里引用如何自动更改呢？

lint 不能识别 es7

class x{
y = ()=>{
}
}

Parsing error: Unexpected token =

采用npm pack来下载脚手架

将脚手架项目作为模块发布到npm，采用:

$ antd-init antd-redux
$ antd-init [email protected]

来下载脚手架当前文件夹。

判断内外网，采用 tnpm，cnpm，npm 来pack。

build-antd-standalone

npm install
npm run build执行完毕后生成了antd.js和css。
按照codepen中引入的方法进入了js和css，并且也引入了browser.min, react-with-addons, react-dom等js，如下：

<script src="public/another2/antd.js"></script>

<script src="public/another2/antd.js"></script>
......
<script type="text/babel">
const {
  DatePicker,
  Button,
  message
} = antd;

var Hello = React.createClass({
  render: function() {
    return <div style={{margin: 10}}>
      <h1>antd@{antd.version}</h1>
      <DatePicker />
    </div>;
  }
});

ReactDOM.render(<Hello />,
  document.getElementById('container')
);

const info = function() {
  message.info('这是一条普通的提醒');
};

ReactDOM.render(<Button type="primary" onClick={info}>显示普通提醒</Button>, document.getElementById('message1'));
</script>

<script type="text/babel"> const { DatePicker, Button, message } = antd; var Hello = React.createClass({ render: function() { return

antd@{antd.version}

; } }); ReactDOM.render(, document.getElementById('container') ); const info = function() { message.info('这是一条普通的提醒'); }; ReactDOM.render(显示普通提醒, document.getElementById('message1')); </script>

在网页上没有任何作用。但是以上代码在codepen中，message确实可以显现出来。

build antd standalone生成的js和css有问题么，如果没有，
请教如何使用build antd standalone生成的js和css么。有相关的例子吗？

谢谢。

增加一个脚手架类型：react + redux 系的应用架构

参考

https://github.com/sorrycc/react-redux-boilerplate

使用

$ antd-init
? Please select application type
> plain react - 适用于简单项目
  redux - 适用于复杂项目

delete pkg.scripts build args

"build": "atool-build -o ./dist/${npm_package_family}/${npm_package_name}/${npm_package_version}"

https://github.com/ant-design/antd-init/blob/master/boilerplate/package.json#L34

It's not an universal workflow.

生成出来的package.json 有些问题

"build": "atool-build -o ./dist/${npm_package_family}/${npm_package_name/{npm_package_version}"

"build": "atool-build -o ./dist/${npm_package_family}/${npm_package_name}/${npm_package_version}"

不知道是我环境的还是啥问题，这个生成出来的build，后面的格式有点问题,第一个是生成的，第二个是正确的！

修改 Ant Design 的主色系问题

更新代码后，还是存在部分less变量可以改值，比如@font-size-base，@link-color等，有些不可以，比如@primary-color，@border-radius-base，@border-radius-sm好像就改不了，请教如何解决，能说明的具体点么？