create-react-app中按需加载引入Ant Design

我选择使用react官方推荐的构建工具,create-react-app+webpack来快速搭建项目,蚂蚁金服的AntDesign这个ui框架能满80%的平时需求,强力主推。

下面我就是讲webpack下的按需加载(浏览器引入就略过了)的配置方法。分为两种babel-plugin-import(推荐)手动引入

我的版本信息
"webpack": "3.8.1",
"react": "^16.3.2",
下载包
npm install antd -S
yarn add antd

按需加载

    babel-plugin-import(推荐)

        下载包     
          
npm install babel-plugin-import -D
          webpack 配置
            在webpack.config.dev.js中添加下面的代码
        
// Process JS with Babel.
  {
                        test: /\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        loader: require.resolve('babel-loader'),
                        options: {
                            "plugins": [
                                ["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css"}] // `style: true` 会加载 less 文件
                            ],
                            // This is a feature of `babel-loader` for webpack (not Babel itself).
                            // It enables caching results in ./node_modules/.cache/babel-loader/
                            // directory for faster rebuilds.
                            cacheDirectory: true,
                        },
   },

            然后只需从antd引入模块即可,无需单独引入样式,等同于下面手动引入的方式

    //babel-plugin-import会帮助你加载JS和CSS
    import {DatePicker} from 'antd'
    手动引入
        
import DataPicker from 'antd/lib/date-pcker';//加载JS
import 'antd/lib/date-picker/style/css';//加载CSS
//import 'antd/lib/data-picker/style';//加载less






你可能感兴趣的:(create-react-app中按需加载引入Ant Design)