react腳手架如何配置less和ant按需加載

前言

create-react-app是由React官方提供並推薦使用構建新的React單頁面應用程序的最佳方式,其構建的項目默認是不支持less的,須要咱們手動集成

1、react腳手架搭建

一、先全局安裝create-react-app(提早須要安裝node)

npm install -g create-react-app

二、而後經過create-react-app建立項目my-app

create-react-app my-app

三、最後經過cd進入項目文件夾並啓動

cd my-app
yarn start

四、終端出現以下界面表示啓動成功，並在瀏覽器中輸入http://localhost:3000/便可看到react的初始頁面

2、目錄結構

┌─node_modules                      -依賴包
       ├─public                            -全局文件
       ├─src                               -項目文件
       ├─.gitignore                        -提交被git忽略文件目錄
       ├─package.json                      -項目配置文件
       ├─README.md                         -README文件
       └─yarn.lock                         -鎖定項目所需的各類配置版本

3、安裝less和less-loader(less編譯器)

yarn add less less-loader

安裝完成以後該怎麼配置呢？這時須要經過webpack來配置less-loader，可是咱們在上面的目錄結構中彷佛並無發現webpack.config.js文件，這是由於腳手架爲了實現「零配置」，會默認把一些通用的腳本和配置集成到 react-scripts，目的是讓咱們專一於src目錄下的開發工做，再也不操心環境配置。同時，被其集成的腳本和配置也會從程序目錄中消失 ，程序目錄也會變得乾淨許多
接下來，咱們就須要經過yarn eject將webpack配置暴露出來

4、暴露webpack配置

執行yarn eject

提示：執行該命令後會把已構建依賴項、配置文件和腳本複製到程序目錄中。該操做是不可逆轉的，執行完成後會刪除這個命令，也就是說只能執行一次

配置完成以後，咱們會發現咱們的目錄結構中會多出兩個文件夾：

其中config文件夾，有三個關於 webpack 的配置文件：

webpack.config.dev.js 開發環境配置
webpack.config.prod.js 生產環境配置
webpackDevServer.config.js 開發服務器配置

5、修改webpack配置文件

第一步：到webpack.config.dev.js文件中找到以下代碼，在sassModuleRegex後面加上lessRegex和lessModuleRegex變量

第二步：在下面加上這兩段代碼

第三步：按照一樣的方法，把webpack.config.prod.js也配置上

6、測試

一、在src目錄中把App.css改成App.less文件，並在裏面加上

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

二、而後再App.js中把less文件導入

import './App.less';

三、回到頁面刷新，發現字體變紅，說明配置成功

7、集成Ant Design 並配置按需加載

antd：是螞蟻金服推出的一個很優秀的react UI庫，其中包含了不少咱們常用的組件，對於小白學習react來講十分友好！

一、首先須要安裝antd

yarn add antd

二、安裝完成以後咱們就能夠直接在代碼裏使用它的ui組件了

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

這個方法的優勢是比較簡單，不需再次配置，直接加載便可，可是比較麻煩，每次載入一個新的組件都須要先載入組件，再加載組件的css文件，性能較差

三、使用 babel-plugin-import 來進行按需加載

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

四、安裝完成以後，在package.json中找到babel配置項，而後再裏面加上plugins

注意： 這裏babel配置項是須要經過yarn eject暴露出來纔會有，本來的package.json是沒有這個配置項的

五、最後只需從antd引入模塊便可，無需單獨引入樣式, babel-plugin-import會幫助你加載 JS 和 CSS

import {Button} from 'antd';

六、關於antd的按需加載其實還有其餘的方法，官方推薦使用react-app-rewired來實現antd的按需加載
詳見: https://ant.design/docs/react...