React脚手架配置Antd

React是目前非常火的一个用于构建用户界面的JavaScript库，它使创建交互式 UI 变得轻而易举。Antd是蚂蚁金服推出的基于Ant Design 设计体系的 UI 组件库，主要用于研发企业级中后台产品。Antd提供的组件不仅简约大气，而且功能强悍，还支持自定义主题、暗黑模式、数十个国际化语言等，提供了React、Vue、Angular等多种实现方式。接下来我将详细讲解在React脚手架中如何配置Antd。 1. 环境 node.js 一款编辑器（VS code、IDEA、WebStrom等） 2. 创建项目 在项目文件目录下打开cmd命令行，使用npm install -g create-react-app命令全局安装create-react-app脚手架工具（安装一次后不用再次安装）。 运行create-react-app my-web命令（my-web为自己的项目名称），创建自己的项目。这个过程会下载很多依赖，如果下载速度很慢，可以先终止此次操作，运行npm config set registry https://registry.npm.taobao.org/命令，将npm换成国内的淘宝源。出现下面的信息就是项目创建成功了。 项目创建成功.png 由于我安装了yarn，所以提示是如何使用yarn启动、构建项目，正常的话应该是显示npm start等。 3. 安装Antd 现在项目已经创建好了，用我们的IDE打开这个项目。在IDE的终端里输入npm install antd --save或yarn add antd命令安装Antd框架。 安装antd.png 至此，就可以使用Antd写一些非常漂亮的页面了。但是，如果你还想自己配置主题的话，那吗还需要一些操作才能完成。 4. 高级配置 在终端里运行npm install react-app-rewired customize-cra --save或yarn add react-app-rewired customize-cra命令。这两个库是对create-react-app进行自定义配置的社区解决方案。安装成功之后，修改package.json里的启动配置如下： "scripts":{ "start":"react-app-rewired start", "build":"react-app-rewired build", "test":"react-app-rewired test", "eject": "react-app-rewired eject" } 然后运行npm install babel-plugin-import less less-loader@5或yarn add babel-plugin-import less less-loader@5。其中，babel-plugin-import是一个用于按需加载组件代码和样式的babel插件，less和less-loader则是用于自定义主题的框架。 特别注意：less-loader@5千万不要少了后面的“@5”，否则会默认安装最新的第6版，而这会导致修改主题后，出现项目编译失败的错误。 编译出错.png 然后在项目的根目录下创建一个config-overrides.js用于修改默认配置。 const { override, fixBabelImports, addLessLoader } = require('customize-cra'); module.exports = override( // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import) fixBabelImports('import',{ libraryName:'antd', libraryDirectory:'es', style:true,//自动打包相关的样式 默认为 style:'css' }), // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题 addLessLoader({ javascriptEnabled: true, // 将默认的主题色修改为绿色，其余的颜色变量可前往antd官网查询 modifyVars:{'@primary-color':'#1DA57A'}, }), ); 到这里我们的配置就全部结束了，我们可以开始写代码看一下效果了。 5. 运行 在App.js里，将默认的代码修改如下： import React from 'react'; import ReactDOM from 'react-dom'; import {Button} from 'antd'; class App extends Component { render() { return ( ) } } 运行npm start或yarn start命令启动项目，出现下面这样一个绿色的按钮就证明我们的配置成功了！ 运行结果.png 6. 总结 最初按照官网的步骤配置主题，一直出现Failed to compile的错误，经过多次摸索之后才发现，可能是最新的less-loader导致的问题，于是将版本改回5.0.0才正常运行。因此，希望大家特别注意这一点。

本文章由javascript技术分享原创和收集