<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[spicyboiledfish的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/SpicyBoiledFish</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; SpicyBoiledFish]]></copyright><item><title><![CDATA[使用ES6进行对象数组去重]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/109855881</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/109855881</guid><author>SpicyBoiledFish</author><pubDate>Fri, 20 Nov 2020 17:24:50 +0800</pubDate><description><![CDATA[之前使用new Set数组去重，只可以去重简单字符数组，或者数字数组等。Array.from(new Set(arr))即可。但是这种方案针对对象数组并不适用
]]></description><category></category></item><item><title><![CDATA[Antd的table筛选，表头columns的filters过滤清空]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/109117612</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/109117612</guid><author>SpicyBoiledFish</author><pubDate>Fri, 16 Oct 2020 15:42:26 +0800</pubDate><description><![CDATA[Form +Table 实现了自定义筛选菜单的功能。具体可以参考https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。

但是此功能会有bug：

选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。但是 Ta.]]></description><category></category></item><item><title><![CDATA[umi2升级到umi3，并接入qiankun]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/108782333</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/108782333</guid><author>SpicyBoiledFish</author><pubDate>Thu, 24 Sep 2020 20:24:49 +0800</pubDate><description><![CDATA[qiankun 是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。具体可看：https://qiankun.umijs.org/zh/guide

umi3可以顺利接入qiankun。但是umi2着实有些麻烦。所以最终我采取升级umi2到umi3再接入。

1. 升级umi2到umi3


npm uninstall -S dva antd
npm uninstall -D umi-plugin-react 
npm install -D umi@..]]></description><category></category></item><item><title><![CDATA[rollup打包踩坑经验]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/108468690</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/108468690</guid><author>SpicyBoiledFish</author><pubDate>Tue, 08 Sep 2020 14:53:21 +0800</pubDate><description><![CDATA[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.]]></description><category></category></item><item><title><![CDATA[Antd中Form表单的onChange事件中执行setFieldsValue不生效]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/108225749</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/108225749</guid><author>SpicyBoiledFish</author><pubDate>Tue, 25 Aug 2020 17:39:08 +0800</pubDate><description><![CDATA[如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。原因是因为：Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖掉。解决方案：

1. 使用setTimeout延时。此方案不推荐

2. 使用getValueFromEvent. 是当onChange的时候，更改form表单的值的情景下使用


&lt;FormItem label="路由节点" {...nodelayo]]></description><category></category></item><item><title><![CDATA[ant.design v4中经验总结]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/107005384</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/107005384</guid><author>SpicyBoiledFish</author><pubDate>Sun, 28 Jun 2020 18:15:08 +0800</pubDate><description><![CDATA[1. &lt;Select&gt;中如果一旦加了value属性，placeholder属性就会失效。解决方案：将默认的value值改成undefined即可
]]></description><category></category></item><item><title><![CDATA[如何在下拉选择框中，选择的时候添加tips]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106816484</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106816484</guid><author>SpicyBoiledFish</author><pubDate>Wed, 17 Jun 2020 19:10:28 +0800</pubDate><description><![CDATA[&lt;Select
   showSearch={true}
   onChange={selectInfo}
   placeholder="请输入名称搜索"
&gt;
{
   serverList.map((item, index) =&gt; {
      return(
          &lt;Option value={item} key={index} title={item}&gt;
              &lt;Popover overlayStyle={{ zIndex:.]]></description><category></category></item><item><title><![CDATA[antv/G2 v4使用遇坑之旅]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106792335</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106792335</guid><author>SpicyBoiledFish</author><pubDate>Tue, 16 Jun 2020 17:59:51 +0800</pubDate><description><![CDATA[1. 当container中指定是这个容器的id名时，如果要复用这个组件，那么会在当前id下创建多个一样的图表组件，且样式会乱掉。因为指明了当前id. 解决方案：改用refs去指定即可。


this.chart = new Chart({
   container: this.chartRef.current,
   autoFit: true,
   height: 220,
});


render() {
  return &lt;div id="hitogram" ref={this.chartR]]></description><category></category></item><item><title><![CDATA[Git提交代码开启大小写区分]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106522746</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106522746</guid><author>SpicyBoiledFish</author><pubDate>Wed, 03 Jun 2020 13:55:00 +0800</pubDate><description><![CDATA[git config core.ignorecase false

]]></description><category></category></item><item><title><![CDATA[FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory打包报错解决]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106501494</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/106501494</guid><author>SpicyBoiledFish</author><pubDate>Tue, 02 Jun 2020 17:47:17 +0800</pubDate><description><![CDATA[对于庞大的项目而言，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 ./]]></description><category></category></item><item><title><![CDATA[报错：Could not find a declaration file for module 'xxx'. 'xxx' implicitly has an 'any' type.]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/103035540</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/103035540</guid><author>SpicyBoiledFish</author><pubDate>Tue, 12 Nov 2019 18:18:04 +0800</pubDate><description><![CDATA[报错截图如下：



除了遇到js引入的module报错，也会遇到类似于img引入时候报错，报错如下：



而图片的引入是按照：


// 引入
import replyIcon from '../../images/reply.png';


// render
&lt;img src={replyIcon} /&gt;

报错的原因就是因为ts中这些module没有被声明。

在根目录加一个...]]></description><category></category></item><item><title><![CDATA[webpack系列笔记（10）webpack启动过程分析]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102549384</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102549384</guid><author>SpicyBoiledFish</author><pubDate>Mon, 14 Oct 2019 15:35:04 +0800</pubDate><description><![CDATA[实际的入口文件是：node_modules/webpack/bin/webpack.js



打开这个webpack.js分析源码：





根据源码分析：

大致的过程如下：

1. process.exitCode = 0; 正常执行返回

2. 运行命令

3. 判断依赖包是否已经安装上

4. 判断cli和common是否其中一个已经安装上

5. 如果两个都安装了。警告需要去除一...]]></description><category></category></item><item><title><![CDATA[webpack系列笔记（9）webpack构建速度和体积优化策略]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548837</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548837</guid><author>SpicyBoiledFish</author><pubDate>Mon, 14 Oct 2019 15:29:28 +0800</pubDate><description><![CDATA[初级分析：使用webpack内置的stats

stats: 构建的统计信息

package.json中使用stats:

"scripts": { "build: stats":"webpack --env production --json &gt; stats.json" }



stats，颗粒度太粗，看不出问题所在。



速度分析：使用speed-measure-webpack...]]></description><category></category></item><item><title><![CDATA[webpack系列笔记（8）冒烟、单元测试和测试覆盖率]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548697</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548697</guid><author>SpicyBoiledFish</author><pubDate>Mon, 14 Oct 2019 15:16:29 +0800</pubDate><description><![CDATA[冒烟测试（smoke testing）:

冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需要重新的基本功能失效等严重问题。



单元测试的工具：

mocha



Use // eslint-disable-next-line to ignore the next line.

Use /* eslint-disable */ to...]]></description><category></category></item><item><title><![CDATA[webpack系列笔记（7）优化构建命令行]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548636</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548636</guid><author>SpicyBoiledFish</author><pubDate>Mon, 14 Oct 2019 15:10:45 +0800</pubDate><description><![CDATA[优化构建命令：



统计信息stats





采用errors-only，只在发生错误时输出。这样就免了在控制台打印的很多的信息。可是实际操作的时候发现。errors-only在npm run build时，信息很少，没有打包成功的明显的命令。故此引入新的插件。



npm i friendly-errors-webpack-plugin -D

可以很明显的打印出来成功、警告和失败...]]></description><category></category></item><item><title><![CDATA[webpack系列笔记（6）实现SSR打包]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548595</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548595</guid><author>SpicyBoiledFish</author><pubDate>Mon, 14 Oct 2019 15:08:43 +0800</pubDate><description><![CDATA[总结，SSR（server render） 服务端渲染的核心就是减少请求



1. 减少白屏时间

2. 对SEO友好



SSR的代码实现思路：

1. 服务端：

使用react-dom/server的renderToString方法将React组件渲染成字符串
	服务端路由返回对应的模板


2. 客户端

打包出针对服务端的组件


webpack ssr打包时...]]></description><category></category></item><item><title><![CDATA[webpack系列笔记（5）性能优化]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548462</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548462</guid><author>SpicyBoiledFish</author><pubDate>Mon, 14 Oct 2019 15:07:14 +0800</pubDate><description><![CDATA[移动端css px自动转换成rem:

px2rem-loader:


{ 

loader: 'px2rem-loader', 

options: { 

remUnit: 75, 

// 1个rem是多少px, 一般以750设计稿，

vw/10是75 remPrecision: 8 

// rem计算保留8个小数点 

} }



静态资源内联：

css内联：

方法一：借助s...]]></description><category></category></item><item><title><![CDATA[webpack系列笔记（4）hash]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548357</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102548357</guid><author>SpicyBoiledFish</author><pubDate>Mon, 14 Oct 2019 15:03:28 +0800</pubDate><description><![CDATA[path: path.resolve(__dirname, 'dist')

console.log(__dirname);

打印出来是：/Users/wangrui/Desktop/wpDemos

意思是：在当前根目录上创建一个dist文件夹，并且将打包出来的文件放进去



运行脚本：

./node_modules/.bin/webpack 在本地安装后可以执行这个命令进行打包


...]]></description><category></category></item><item><title><![CDATA[git help --web log执行命令时报错fatal: '/usr/local/git/share/doc/git-doc': not a documentation directory.]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102502442</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/102502442</guid><author>SpicyBoiledFish</author><pubDate>Fri, 11 Oct 2019 15:41:33 +0800</pubDate><description><![CDATA[在执行命令


git help --web log


时遇到提示


fatal: ‘/usr/local/git/share/doc/git-doc’: not a documentation directory.


解决方案：

1. 升级最新的git版本：目前我用的git版本是v2.23.0

2. 按照以下的步骤进行输命令：

如果您认为自己拥有Xcode 4提供的Apple Git...]]></description><category></category></item><item><title><![CDATA[报错：Registry returned 409 for PUT on http://registry.npm.taobao.org/ -/user/org.couchdb.user]]></title><link>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/100186937</link><guid>https://blog.youkuaiyun.com/SpicyBoiledFish/article/details/100186937</guid><author>SpicyBoiledFish</author><pubDate>Sun, 01 Sep 2019 19:51:45 +0800</pubDate><description><![CDATA[先贴出报错：



npm登录的时候，报错409.

原因：镜像源切到了淘宝源，需要将淘宝源切回到npm.

解决方法：nrm use npm.

或者：

npm login --registry http://registry.npmjs.org

npm publish --registry http://registry.npmjs.org


...]]></description><category></category></item></channel></rss>