(1)create-react-app如何创建项目我前面第一章介绍过了,这里就不过多写了,

(2)我们主要来说说按需加载的问题

1. 引入antd

npm install antd --save  

2. 引入react-app-rewired(一个对 create-react-app 进行自定义配置的社区解决方案)

npm install react-app-rewired --save

  引入 react-app-rewired 并修改 package.json 里的启动配置

  修改scripts:{}里面的内容

   

  

  3. 引入babel-plugin-import 

npm install babel-plugin-import --save

  然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。 

const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
)
return config;
};

  

  4. 然后在要用的模块中引入,例如:import { Button } from 'antd';

React(九)create-react-app创建项目 + 按需加载Ant Design的更多相关文章

  1. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  2. 【react学习二】create-react-app 接入antd 并按需加载组件

    1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...

  3. ASP.NET MVC - 启动创建项目,未能加载错误

    VS2012以常规方式创建一ASP.NET MVC internet 项目.创建后F5启动项目,遇一错误: 未能加载文件或程序集“MySql.Web.v20, Version=6.9.4.0, Cul ...

  4. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  5. vue项目按需加载的3种方式

    本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...

  6. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

  7. 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  8. React Router 按需加载+服务器渲染的闪屏问题

    伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...

  9. React引入AntD按需加载报错

    背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...

随机推荐

  1. L1-Day10

    1.你需要的是更多的练习.[我的翻译]That you need is more practice.[标准答案]What you need is more practice[对比分析]主语从句用Tha ...

  2. dubbo直连提供者 & 只订阅 & 只注册

    1.    dubbo直连提供者 在开发及测试环境下,经常需要绕过注册中心,只测试指定服务提供者,这时候可能需要点对点直连,点对点直连方式,将以服务接口为单位,忽略注册中心的提供者列表,A 接口配置点 ...

  3. dialog自适应大小、固定大小、底部显示

    创建一个从底部显示的对话框 if (dialog == null) { dialog = new Dialog(context, R.style.theme_from_bottom); View vi ...

  4. mysql性能优化分析 --- 下篇

    概要回顾 之前看过<高性能mysql>对mysql数据库有了系统化的理解,虽然没能达到精通,但有了概念,遇到问题时会有逻辑条理的分析; 这回继上次sql分析结果的一个继续延伸分析,我拿了; ...

  5. 洛谷P5284 [十二省联考2019]字符串问题 [后缀树]

    传送门 思路 设\(dp_i\)表示以\(i\)结尾的\(A\)串,能达到的最长长度. 然后发现这显然可以\(i\)往自己控制的\(k\)连边,\(k\)往能匹配的\(j\)连边,就是个最长路,只要建 ...

  6. python学习记录20190121

    print 语句默认会给每一行添加一个换行符.只要在print 语句的最后添加一个逗号(,),就可以改变它这种行为 带逗号的print语句输出的元素之间会自动添加一个空格 print 没有任何参数的p ...

  7. poj1456 Supermarket 贪心+并查集

    题目链接:http://poj.org/problem?id=1456 题意:有n个物品(0 <= n <= 10000) ,每个物品有一个价格pi和一个保质期di (1 <= pi ...

  8. Android Q 变更和新特性

    安全和隐私变更 隐私保护是Android Q重要的主题之一,Android Q带来了一系列增强用户隐私保护的变更. 1 应用文件存储空间限制 应用访问限制是Android Q影响最大变更之一.在And ...

  9. 理解go的闭包

    package main import ( "fmt" ) func test(a int) { a++ fmt.Println(a) } func test2() func() ...

  10. .net core 2.x - 发布到IIS

    没啥写的,随便记录下 说明 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,IIS则是作为反向代理的 ...