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

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

赞 (0)

相关推荐

  • webpack+react+antd脚手架优化的方法

    在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化. 优化类目 样式分离 第三方资源分离 区分开发环境 热更新 提取公共代码 1. CSS分离 npm install extract-text-webpack-plugin -D webpack.config.js 将css.less.sass文件单独从打包文件中分离 + let cssExtract = new ExtractTextWebpackPlugin({ + filen

  • 如何解决React官方脚手架不支持Less的问题(小结)

    如何解决React官方脚手架不支持Less的问题(小结)

    说在前面 create-react-app是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言Less的.如果我们的项目必须要使用 Less 呢,这就需要我们手动集成一下.本篇主要针对集成的过程做一个简要记录. 环境准备 本小节先用 create-react-app 构建一个全新的 React 项目作为实验环境. 如果您之前未曾使用过 create-react-app,请先通过如下命令全局安装(假定您

  • 从零开始学习搭建React脚手架项目

    写在前面 准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多 react和vue,angular一样也有脚手架.这大大方便了我们的开发.react的脚手架是create-react-app. 脚手架下载 使用npm下载create-react-app运行如下命令: npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况,我们可

  • 详解开发react应用最好用的脚手架 create-react-app

    1. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧. 大家都是用webpack + es6来结合react开发前端应用. 这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境. 比如: npm install react react-dom --save npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --

  • 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

  • react 实现页面代码分割、按需加载的方法

    react 实现页面代码分割、按需加载的方法

    虽然一直有做 react 相关的优化,按需加载.dll 分离.服务端渲染,但是从来没有从路由代码分割这一块入手过,昨天在本地开发时没有测试成功,今天又搞了下,已经部署到线上环境了,今天就这个记录一下. 修改配置 开发环境:webpack@v3 .react-router@v4 安装依赖: $ yarn add babel-plugin-syntax-dynamic-import -dev 修改 .babelrc 文件:在 plugins 中添加 "syntax-dynamic-import&qu

  • react配置antd按需加载的使用

    我目前使用的antd版本是2.13.现在最新的是3.0.1. 脚手架工具就是create-react-app.创建完成项目后,需添加配置,执行yarn eject 也就是打开配置的文档. 然后安装第三方依赖yarn add babel-plugin-import --save-dev 找到config文件夹.里面有2个配置文档, webpack.config.dev.js和webpack.config.prod.js 添加配置时一定要保持文档的一致性.我就是犯了错误,值配置了开发的没有配置正式文

  • React Native 真机断点调试+跨域资源加载出错问题的解决方法

    React Native 真机断点调试+跨域资源加载出错问题的解决方法

    写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下. 如何断点调试 首先,在真机上加载运行RN应用(过程略). 然后,摇动手机,弹出开发菜单,选择"Debug JS Remotely". chrome会自动打开调试界面,地址是 http://localhost:8081/debugger-u

  • 基于vue和react的spa进行按需加载的实现方法

    基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源.自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按

  • react中路由和按需加载的问题

    react中路由和按需加载的问题

    目录 react路由和按需加载问题 1 基本的路由设置 2 如何完成路由的菜单部分 3 如何将每个路由的js文件分开输出 4 react-router按需加载配置 5 最后效果 react路由的基本使用 1.先下包 2.导入并使用 3.使用HashRouter包裹整个应用 4.使用Link指定导航链接 5.使用Route指定路由规则(哪个路径展示哪个组件) 6.精确匹配 :exact 7.Switch 8.处理404页 Redirect react路由和按需加载问题 1 基本的路由设置 reac

  • 详解React开发中使用require.ensure()按需加载ES6组件

    首先介绍下动态加载函数: require.ensure([], (require)=>{ let A = require('./a.js').default; }) 如果想要动态加载出es6代码组件,直接require一个es6风格的组件是不行的,因为一般的语言编译工具(如babel),不支持直接require一个es6风格的组件. 那么有种办法可以解决:在es6方式书写的组件底部增加一句:module.exports = YouclassName; import React, {Compone

  • Nginx如何配置Http、Https、WS、WSS的方法步骤

    写在前面 当今互联网领域,Nginx是使用最多的代理服务器之一,很多大厂在自己的业务系统中都是用了Nginx作为代理服务器.所以,我们有必要了解下Nginx对于Http.Https.WS.WSS的各项配置.来来来,跟冰河一些学习Nginx,一起进阶,一起头秃~~ Nginx配置Http 首先,我们来聊聊Nginx如何配置Http,Nginx配置Http是Nginx最常用的功能之一.在nginx.conf中配置相应的信息,如下所示. upstream message { server localh

  • 基于Python实现配置热加载的方法详解

    基于Python实现配置热加载的方法详解

    目录 背景 如何实现 使用多进程实现配置热加载 使用signal信号量来实现热加载 采用multiprocessing.Event 来实现配置热加载 结语 背景 由于最近工作需求,需要在已有项目添加一个新功能,实现配置热加载的功能.所谓的配置热加载,也就是说当服务收到配置更新消息之后,我们不用重启服务就可以使用最新的配置去执行任务. 如何实现 下面我分别采用多进程.多线程.协程的方式去实现配置热加载. 使用多进程实现配置热加载 如果我们代码实现上使用多进程, 主进程1来更新配置并发送指令,任务的

  • webpack配置sass模块的加载的方法

    webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要安装sass的依赖包 //在项目下,运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass,所以还要安装node-sass npm install --save-dev node-sass 当然了,使用样式的话,css-lo

随机推荐