spicyboiledfish的博客

之前使用new Set数组去重，只可以去重简单字符数组，或者数字数组等。Array.from(new Set(arr))即可。但是这种方案针对对象数组并不适用

Form +Table 实现了自定义筛选菜单的功能。具体可以参考https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。但是此功能会有bug：选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。但是 Ta.

qiankun 是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。具体可看：https://qiankun.umijs.org/zh/guideumi3可以顺利接入qiankun。但是umi2着实有些麻烦。所以最终我采取升级umi2到umi3再接入。1. 升级umi2到umi3npm uninstall -S dva antdnpm uninstall -D umi-plugin-react npm install -D umi@..

import babel from 'rollup-plugin-babel';import commonjs from '@rollup/plugin-commonjs';import replace from 'rollup-plugin-replace';import nodeResolve from 'rollup-plugin-node-resolve';import { uglify } from 'rollup-plugin-uglify';import { eslint } fr.

如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。原因是因为：Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖掉。解决方案：1. 使用setTimeout延时。此方案不推荐2. 使用getValueFromEvent. 是当onChange的时候，更改form表单的值的情景下使用<FormItem label="路由节点" {...nodelayo

1. <Select>中如果一旦加了value属性，placeholder属性就会失效。解决方案：将默认的value值改成undefined即可

<Select showSearch={true} onChange={selectInfo} placeholder="请输入名称搜索">{ serverList.map((item, index) => { return( <Option value={item} key={index} title={item}> <Popover overlayStyle={{ zIndex:.

1. 当container中指定是这个容器的id名时，如果要复用这个组件，那么会在当前id下创建多个一样的图表组件，且样式会乱掉。因为指明了当前id. 解决方案：改用refs去指定即可。this.chart = new Chart({ container: this.chartRef.current, autoFit: true, height: 220,});render() { return <div id="hitogram" ref={this.chartR

git config core.ignorecase false

对于庞大的项目而言，webpack打包会存在node内存溢出的问题。解决方案如下：webpack4:原先的："build": "webpack --mode production --config ./config/webpack.config.prod.js",更改后的："build": "node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --mode production --config ./

报错截图如下：除了遇到js引入的module报错，也会遇到类似于img引入时候报错，报错如下：而图片的引入是按照：// 引入import replyIcon from '../../images/reply.png';// render<img src={replyIcon} />报错的原因就是因为ts中这些module没有被声明。在根目录加一个...

实际的入口文件是：node_modules/webpack/bin/webpack.js打开这个webpack.js分析源码：根据源码分析：大致的过程如下：1. process.exitCode = 0; 正常执行返回2. 运行命令3. 判断依赖包是否已经安装上4. 判断cli和common是否其中一个已经安装上5. 如果两个都安装了。警告需要去除一...

初级分析：使用webpack内置的statsstats: 构建的统计信息package.json中使用stats:"scripts": { "build: stats":"webpack --env production --json > stats.json" }stats，颗粒度太粗，看不出问题所在。速度分析：使用speed-measure-webpack...

冒烟测试（smoke testing）:冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需要重新的基本功能失效等严重问题。单元测试的工具：mochaUse // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to...

优化构建命令：统计信息stats采用errors-only，只在发生错误时输出。这样就免了在控制台打印的很多的信息。可是实际操作的时候发现。errors-only在npm run build时，信息很少，没有打包成功的明显的命令。故此引入新的插件。npm i friendly-errors-webpack-plugin -D可以很明显的打印出来成功、警告和失败...

总结，SSR（server render） 服务端渲染的核心就是减少请求1. 减少白屏时间2. 对SEO友好SSR的代码实现思路：1. 服务端：使用react-dom/server的renderToString方法将React组件渲染成字符串 服务端路由返回对应的模板2. 客户端打包出针对服务端的组件webpack ssr打包时...

移动端css px自动转换成rem:px2rem-loader:{ loader: 'px2rem-loader', options: { remUnit: 75, // 1个rem是多少px, 一般以750设计稿，vw/10是75 remPrecision: 8 // rem计算保留8个小数点 } }静态资源内联：css内联：方法一：借助s...

path: path.resolve(__dirname, 'dist')console.log(__dirname);打印出来是：/Users/wangrui/Desktop/wpDemos意思是：在当前根目录上创建一个dist文件夹，并且将打包出来的文件放进去运行脚本：./node_modules/.bin/webpack 在本地安装后可以执行这个命令进行打包...

在执行命令git help --web log时遇到提示fatal: ‘/usr/local/git/share/doc/git-doc’: not a documentation directory.解决方案：1. 升级最新的git版本：目前我用的git版本是v2.23.02. 按照以下的步骤进行输命令：如果您认为自己拥有Xcode 4提供的Apple Git...

先贴出报错：npm登录的时候，报错409.原因：镜像源切到了淘宝源，需要将淘宝源切回到npm.解决方法：nrm use npm.或者：npm login --registry http://registry.npmjs.orgnpm publish --registry http://registry.npmjs.org...