react脚手架如何配置less和ant按需加载的方法步骤

 更新时间:2018年11月28日 09:30:06   作者:xiaoxiaohu  
这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成

一、react脚手架搭建

1、先全局安装create-react-app(提前需要安装node)

npm install -g create-react-app

2、然后通过create-react-app创建项目my-app

create-react-app my-app

3、最后通过cd进入项目文件夹并启动

cd my-app
yarn start

4、终端出现如下界面表示启动成功,并在浏览器中输入http://localhost:3000/即可看到react的初始页面

二、目录结构

 ┌─node_modules           -依赖包
    ├─public              -全局文件
    ├─src                -项目文件
    ├─.gitignore            -提交被git忽略文件目录
    ├─package.json           -项目配置文件
    ├─README.md             -README文件
    └─yarn.lock             -锁定项目所需的各种配置版本

三、安装less和less-loader(less编译器)

yarn add less less-loader

安装完成之后该怎么配置呢?这时需要通过webpack来配置less-loader,但是我们在上面的目录结构中似乎并没有发现webpack.config.js文件,这是因为脚手架为了实现“零配置”,会默认把一些通用的脚本和配置集成到 react-scripts,目的是让我们专注于src目录下的开发工作,不再操心环境配置。同时,被其集成的脚本和配置也会从程序目录中消失 ,程序目录也会变得干净许多

接下来,我们就需要通过yarn eject将webpack配置暴露出来

四、暴露webpack配置

执行yarn eject

提示:执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录中。该操作是不可逆转的,执行完成后会删除这个命令,也就是说只能执行一次

配置完成之后,我们会发现我们的目录结构中会多出两个文件夹:

其中config文件夹,有三个关于 webpack 的配置文件:

  • webpack.config.dev.js 开发环境配置
  • webpack.config.prod.js 生产环境配置
  • webpackDevServer.config.js 开发服务器配置

五、修改webpack配置文件

第一步:到webpack.config.dev.js文件中找到如下代码,在sassModuleRegex后面加上lessRegex和lessModuleRegex变量

第二步:在下面加上这两段代码

第三步:按照同样的方法,把webpack.config.prod.js也配置上

六、测试

1、在src目录中把App.css改为App.less文件,并在里面加上

@title-color:#f00;
.App-link {
 color:@title-color;
}

2、然后再App.js中把less文件导入

import './App.less';

3、回到页面刷新,发现字体变红,说明配置成功

七、集成Ant Design 并配置按需加载

antd:是蚂蚁金服推出的一个很优秀的react UI库,其中包含了很多我们经常使用的组件,对于小白学习react来说十分友好!

1、首先需要安装antd

yarn add antd

2、安装完成之后我们就可以直接在代码里使用它的ui组件了

import {Button} from 'antd';
import 'antd/dist/antd.css';

这个方法的优点是比较简单,不需再次配置,直接加载即可,但是比较麻烦,每次载入一个新的组件都需要先载入组件,再加载组件的css文件,性能较差

3、使用 babel-plugin-import 来进行按需加载

yarn add babel-plugin-import --save-dev

4、安装完成之后,在package.json中找到babel配置项,然后再里面加上plugins

注意: 这里babel配置项是需要通过yarn eject暴露出来才会有,原本的package.json是没有这个配置项的

5、最后只需从antd引入模块即可,无需单独引入样式, babel-plugin-import会帮助你加载 JS 和 CSS

import {Button} from 'antd';

6、关于antd的按需加载其实还有其他的方法,官方推荐使用react-app-rewired来实现antd的按需加载
详见: https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React tsx生成随机验证码

    React tsx生成随机验证码

    这篇文章主要为大家详细介绍了React tsx生成随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • React中事件绑定this指向三种方法的实现

    React中事件绑定this指向三种方法的实现

    这篇文章主要介绍了React中事件绑定this指向三种方法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • React Native自定义Android的SSL证书链校验

    React Native自定义Android的SSL证书链校验

    这篇文章主要为大家介绍了React Native自定义Android的SSL证书链校验示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React图片压缩上传统一处理方式

    React图片压缩上传统一处理方式

    这篇文章主要介绍了React图片压缩上传统一处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • 适用于React Native 旋转木马应用程序介绍

    适用于React Native 旋转木马应用程序介绍

    这篇文章主要介绍了适用于React Native 旋转木马应用程序介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React Electron生成桌面应用过程

    React Electron生成桌面应用过程

    这篇文章主要介绍了React+Electron快速创建并打包成桌面应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • React高阶组件使用详细介绍

    React高阶组件使用详细介绍

    高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧
    2023-01-01
  • React Navigation 使用中遇到的问题小结

    React Navigation 使用中遇到的问题小结

    本篇文章主要介绍了React Navigation 使用中遇到的问题小结,主要是安卓和iOS中相对不协调的地方,特此记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • react+antd 递归实现树状目录操作

    react+antd 递归实现树状目录操作

    这篇文章主要介绍了react+antd 递归实现树状目录操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 关于useEffect执行两次的问题及解决

    关于useEffect执行两次的问题及解决

    这篇文章主要介绍了关于useEffect执行两次的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论