近期准备撸一撸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';
重新启动就可以发现有个按钮出现了。
然后按照官网介绍的安装craco
和craco-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相关了解实在少,有啥说错的,欢迎指正~