如何用原生的react，webpack，es6来使用蚂蚁金服的ant design组件库
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用原生的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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="content"></div> <script src="build/bundle.js"></script> </body> </html>
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 // (<Helloword/>,document.getElementById(‘content‘); // ); ReactDOM.render ( <Helloworld/>, 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(<h1>Hello World！！！！！！</h1>)
}
}
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组件库的主要内容，如果未能解决你的问题，请参考以下文章
React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案