搭建react项目——引入antd并实现按需加载及代理设置

近期准备撸一撸react框架,学习学习,记录一下~
之前对react只是有过了解,可以看看代码,但自己没动手过。

首先创建项目(这边直接用的ts版本)

yarn create react-app demo --template typescript

进入项目并启动

cd demo
yarn start

浏览器会自动弹出并访问http://localhost:3000/,然后过一会页面就会出来react的logo,这边是一开始跑就会弹出页面,而不是跑完才弹出,导致要等一会,等它编译完页面才会出来,感觉有点奇怪,orz。

然后引入antd(直接参照的官网)

yarn add antd

然后照着官网指引,写一个demo,这边直接复制的官网的例子
直接修改项目中的文件src/App.tsx

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改src/App.css,在文件顶部引入antd的样式文件

@import '~antd/dist/antd.css';

重新启动就可以发现有个按钮出现了。

然后按照官网介绍的安装cracocraco-less,当时第一次安装的时候我还不太明白craco到底是个啥东西,先不管,之后介绍。

yarn add @craco/craco craco-less

然后修改package.josn文件

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

在项目根目录新建craco.config.js

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },//主题颜色
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

然后把src/App.css改成src/App.less,然后修改样式引用为less文件

/* src/App.ts */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

重新运行项目,可以发现按钮的样式已经修改了。

官网的教程到此为止,到这里,不得不吐槽一下,有一说一,antd官网的这些都要比react中文官网都要好,react官网连个ts例子都没有,相比之下vue的官网就要舒服很多了。话不多说继续探索~

目前为止例子跑起来了,然而还不能运用到开放环境中,首先服务代理还没地方配呢,对接后台接口没这个可不行,react的这个脚手架并没有暴露出配置,所以还得继续找配置的方法。

首先找到了一个暴露配置的方法
运行

yarn eject

这个命令会暴露出webpack的配置,但要求没有任何git更改,之前改动了几个文件就没法执行,然而我也不想就这么提交代码上去,于是我干脆shift+command+.显示出了隐藏文件夹,删除了.git的文件,然后继续执行,执行完了之后根目录下会多一个config文件夹,里面就是webpack的所有配置。

然而看着这么一长串的文件,我的强迫症的内心是拒绝的,然后打开webpack.config.js,又是一长串的配置,看的我眼花缭乱,哇,我整个人都是拒绝的,于是放弃。

回头又去antd的官网上去看了看,发现了这么一句话

  • 同样,你可以使用 react-scripts-rewired 和 customize-cra 来自定义 create-react-app 的 webpack 配置。

所以craco还可以拿来配置webpack,然后网上找了一圈,都没有相关的例子,官网也打不开(公司的网比较辣鸡),不得已去npm官网找到这个包看readme文件,发现这个其实和vue差不多,直接在craco.config.js里一样配置就可以了。
知道了怎么一回事,我还加上了2个插件,需要先下载

  • webpack-bundle-analyzer:在项目运行之后会弹出一个页面显示编译文件详情。
  • compression-webpack-plugin:gzip打包压缩插件
const CracoLessPlugin = require('craco-less');
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    webpack: {
        plugins: [
            new BundleAnalyzerPlugin(),
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    ['js', 'css'].join('|') +
                    ')$'
                ),
                threshold: 1024,
                minRatio: 0.8
            }),
        ]
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
    devServer: {
        proxy: {
            "/api": {
                target: "http://xxx.xx.xxx.xx:xxxx",//后台服务地址
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    }
};

顺手点开了package.json,发现所有的依赖包都在dependencies里,强迫症又发作了,于是又是一番操作把工具包和ts类型包全部放在了devDependencies

运行之后就会自动弹出文件打包详情。如下
在这里插入图片描述
看了一下,哇,居然有6M多,稍微有点大,光@ant-design和antd/es就占了三分之一还多,然而我只引用了一个按钮呀。等等,我安装antd的时候,包的名称是antd呀,@ant-design是哪来的,点开文件夹看了下,从文件夹命名的字面意思去理解应该是一些颜色,图标,动画文件等东西,应该是antd的依赖包吧,所以一起下下来了。

好吧,那么接下来就要用按需下载了。依然去网上找了一圈(百度型程序员表示有点羞涩orz),然而并没有找到craco配置按需加载的,antd官网也没有,搜索过程中发现antd官网以前是推荐react-scripts-rewired来配置然后实现按需加载,如今换成了craco还去掉了按需加载的教程orz,网上找到的基本就是2种,一种是用react-scripts-rewired配置,一种是像之前提到的eject暴露配置去设置。

综合了一下,我就先下载了插件

yarn add babel-plugin-import

然后在craco.config,.js里加上

 babel: {
     plugins: [
        [
	        "import", 
	        {
	        	"libraryName": "antd",
	        	"libraryDirectory": "es",
	         	"style": true //设置为true即是less
         	}
     	]
     ]
},

然后在src/App.less中去除样式引入,按需加载之后只需引入组件即可,无需在额外引入样式文件,babel会自动按需帮你完成样式的引入。
然后运行项目弹出在这里插入图片描述
大小只有2M,一下缩小了三分之二,然后访问页面按钮样式正常,至此大功告成。
由于对react相关了解实在少,有啥说错的,欢迎指正~

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值