篇首语：本文由小编为大家整理，主要介绍了如何用原生的react，webpack，es6来使用蚂蚁金服的ant design组件库相关的知识，希望对你有一定的参考价值。
参考技术A 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提供的例子，主要依赖的是babel-loader
babel-loader上也有webpack.config.js应该如何编写的例子，传送门: babel-loader
3. 编写我们的文件(例如: demo-antd.jsx)
只使用了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文件中。
这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。
因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如 @陈吉浩 所说，查看github上的代码比npm下载后的代码更舒服。
webpack学习—webpack+react+es6
如果你看过webpack学习系列的前一个文章，接下来做的东西会比较简单 ：webpack学习（四）— webpack-dev-server
react发展的很快，现在大部分开发react相关的项目，都会用到这个组合：webpack+react+es6
还是以一个项目举例，项目中的package.json是生成的，"devDependencies"都是自己安装加入，如果拷贝网上的资料，可以npm install直接生成。而为了一探react的具体开发流程，还是自己一个个安装比较好。
项目目录：
package.json
{ "name": "pro4", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack", "dev": "webpack-dev-server --inline --hot --config webpack.config.js" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.18.2", "babel-loader": "^6.2.7", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "css-loader": "^0.26.0", "react": "^15.4.0", "react-dom": "^15.4.0", "react-hot-loader": "^3.0.0-beta.6", "style-loader": "^0.13.1", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2" }}index.html
Document
webpack.config.js
var path = require("path");module.exports = { entry:[ "./src/js/app.js" ], output: { path: path.resolve("./", "dist"), publicPath: "build", filename: "bundle.js" }, module: { loaders: [ {test: /.js?$/, exclude: /node_modules/, loaders: [ "babel?presets[]=react,presets[]=es2015" ] }, { test: /.css$/, loader: "style!css"} ] }, resolve:{ extensions:["",".js",".json"] },};
src/js/app.js
import React from "react";import ReactDOM from "react-dom";import Helloworld from "./helloworld";// ReactDOM.render// (,document.getElementById("content");// );ReactDOM.render( ,document.getElementById("content"));
src/js/helloword.js
import React from "react";import ReactDOM from "react-dom";class Helloworld extends React.Component{constructor(props) {super(props);}render(){return(Hello World！！！！！！
)}}module.exports = Helloworld安装: npm init
启动：npm run dev
项目地址：http://localhost:8080/index.html
说明：
1）本文例子中package.json包含的 "devDependencies"项，是webpack+react+es6开发的最少的安装。本例热加载，修改任何一个src/js下的js文件，保存，浏览器自动更新。
2）本文例子并没有安装react-hot-loader，原因是直接安装，目前版本一到3.0以上，并不支持在webpack.config.js中这么书写：
{test: /.js?$/, exclude: /node_modules/, loaders: ["react-hot","babel-loader?presets[]=react,presets[]=es2015"] },如果写了，webpack-dev-server会报错：
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately
但是，用低版本的react-hot-loader不会报错。
而且你会发现，现在不用react-hot-loader，也可以热加载。
3）js的加载器：
{test: /.js?$/, exclude: /node_modules/, loaders: [ "babel?presets[]=react,presets[]=es2015" ] },这里很重要，先用babel-loader将es6(es2015),react的语法（jsx）转换为目前浏览器普遍支持的语法，即es5。
如果这里配置出错，或者没有安装除了babel外的2个loader，会报错
Module build failed: SyntaxError: Unexpected token
因为你在return里写的HTML标签不识别（不是字符串）。
4)如果要兼容老版本浏览器，支持es3语法。还需要用es3ify-loader。本例没有用。
以上是关于如何用原生的react，webpack，es6来使用蚂蚁金服的ant design组件库的主要内容，如果未能解决你的问题，请参考以下文章
