antdesign源码解析（antdesign30）
本文目录一览：
如何用原生的react，webpack，es6来使用蚂蚁金服的ant design组件库
1.准备:
npm安装以下组件
a.安装react/antd:
npm install react react-dom antd --save
b.安装webpack/less:
npm install webpack less --save-dev
webpack根据需要选择使用-g安装
c.安装babel-loader以及其他相关package:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
d.选择安装style-loader/css-loader
npm install style-loader css-loader --save-dev
2. 配置webpack.config.js
具体配置可以查看webpack提供antdesign源码解析的例子antdesign源码解析，主要依赖的是babel-loader
babel-loader上也有webpack.config.js应该如何编写的例子antdesign源码解析，传送门: babel-loader
3. 编写我们的文件(例如: demo-antd.jsx)
只使用antdesign源码解析了antd提供的Button组件。只使用了antd提供的Button组件。
ps: 对比
import { Button } from 'antd';
和
import Button from 'antd/lib/button';
后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。
4. 执行构建
webpack ./demo-antd.jsx demo-antd-bundle.js
将生成demo-antd-bundle.js文件
5. 在页面中引入bundle文件(demo-antd-bundle.js)
执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。
这里我们暂时将问题一搁置，来看看问题二antdesign源码解析：组件库的内部机制。
因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如 @陈吉浩 所说，查看github上的代码比npm下载后的代码更舒服。
ant.design能不能直接编译成浏览器直接引用便可用
肯定是可以的，但是官方不建议这样做，但如果题主真想这么做的话可以按照下面方法：
1. 下载并编译ant-design
git clone
cd ant-design
npm i --registry=
npm run just-deploy
2. 使用方法
编译完成后在dist目录下antd.js和demo.css就是它的js和css文件，但是antd.js依赖react和react-dom，所以要引用node_modules/react/dist/react.js和node_modules/react-dom/dist/react-dom.js。（外加一些es5-shim等）
在ant-design根目录下建立测试文件antd-test.html，内容如下：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
link rel="stylesheet" href="./dist/demo.css"
script src=""/script
script src="./node_modules/react/dist/react.js"/script
script src="./node_modules/react-dom/dist/react-dom.js"/script
script src="./dist/antd.js"/script
/head
body
div id="components-calendar-demo-basic"/div
script
(function(){
'use strict';
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(React.createElement(antd.Calendar, {
onPanelChange: onPanelChange
}), document.getElementById('components-calendar-demo-basic'));})();
/script
/body
/html
如何评价 ant design
Ant Design 官方介绍： "在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。"在这次开发的项目中，因为数据交互非常频繁，大量的表单、时间选择器、表格、单选多选框，以及各种标识状态的组件，如果光靠手写或者使用 jQuery 插件，其开发的工作量仍然是相当大的，因此，Ant Design "经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。"
同时，React 也是第一次使用，起初对于这种 Html 与 JS 代码混杂的书写格式搞得很不舒服，因为作为一个前端开发者，被"结构与逻辑分离"的思想洗脑太久了，但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。所以在使用了 React 开发一段时间后，越来越感觉到 React 封装组件的高效。而 Ant Design 则封装了一系列高质量的 React 组件，十分适用于在企业级的应用中，框架提供的 api 十分详尽，上手和使用相对简单，值得一提的是， Ant Design 使用 ES6 进行编写，因此使用过程中对 ES6 也是一次学习的机会。
