antd项目确实是一个非常优秀的开源项目,但是用起来相关文档的说明比较少,特别是从一开始建立一个自己的项目时候需要配置babel,webpack等等,这部分的内容相关介绍就少之又少。因此我写了一个demo,这个demo配置了必要的webpack和babel项,你只要克隆下来,然后npm run dev
就可以了。对于第一次理解antd特别有用。项目地址点击这里
webpack配置说明
- const path = require("path");
- module.exports = {
- module: {
- noParse: [/jquery/],rules: [{
- test: require.resolve('antd'),//此时我们window.antd与window.ANTD都是存在的
- use: [{
- loader: require.resolve('expose-loader'),options: 'antd'
- },{
- loader: require.resolve('expose-loader'),options: 'ANTD'
- }]
- }]
- },//此时我们通过require("antd");就会将antd的所有的组件都暴露到window对象上
- resolve: {
- alias: {
- "antd" :"antd"
- },},devServer:{
- publicPath:'/',open :true,port:@H_502_44@8090,// contentBase: path.join(process.cwd(),"public"),
- // webpack-dev-server中的html无法访问外部的html页面或者其他静态资源
- historyApiFallback: {
- rewrites: [
- { from: "/docs/react/common.js",to: '/common.js' },{ from: "/docs/react/index.js",to: '/index.js' },{ from: "/docs/pattern/common.js",{ from: "/docs/pattern/index.js",{ from: "/docs/resource/common.js",{ from: "/docs/resource/index.js",{ from: "/docs/spec/common.js",{ from: "/docs/spec/index.js",{ from: "/components/alert/common.js",{ from: "/components/alert/index.js",{ from: "/components/button/common.js ",{ from: "/components/button/index.js",to: '/index.js' }
- ]
- },contentBase:false,hot:false
- }
- }
这里我使用了expose-loader将antd暴露为一个全局变量。但是,一定要注意,这个webpack配置文件设置的只是针对这个项目的特定配置,通用的配置请查看这里,我会自动合并这两处的webpack配置内容~~这也是你为什么一开始要手动安装webpackcc的原因~
- npm install webpackcc -g
babel配置
- {
- presets: [
- 'es2015','stage-0','react'
- ],plugins: [
- 'transform-runtime',"react-hot-loader/babel","add-module-exports","jsx-control-statements",['import',{
- libraryName: 'antd',style: 'css'
- }]
- ]
- }
其中最重要的就是其中的babel-plugin-import
,当你引入antd的一个组件的时候,他会自动引入其中的css~~