将React项目CRA从3.x升级到5.0

前置知识cra各版本日志：https://github.com/facebook/create-react-app/releases

webpack5升级注意事项： https://webpack.docschina.org/migrate/5/#preparations

背景

最近在做接口转发服务相关的东西，其大致架构如下图所示，本地的项目使用的是devServer启动，然后代理到了一个中间接口服务（暂且称为API Server），此接口服务监又监听和代理了Mock Server和真实的此时服务器Server。

前言

在前端中处理文件时会经常遇到File、Blob、ArrayBuffer以及相关的处理方法或方式如FileReader、FormData等等这些名词，对于这些常见而又不常见的名词，我相信大多数人对它们都有一种熟悉的陌生人的感觉。究其原因，相关的东西接触的不够多，且每次都网上随手拈来，不求甚解。今天，我们就稍微仔细一点，去做一个探究，弄清他们是谁，能做什么，又有什么区别，

js中得this

this关键词是JavaScript中最令人疑惑的机制之一。this是非常特殊的关键词标识符，在每个函数的作用域中被自动创建，但它到底指向什么，是一个让大多数开发者始终比较头疼的问题，要弄明白js中this的指向问题，需要很多相关知识得储备和理解，比如作用域、作用域链以及函数的调用执行顺序，还要考虑诸多隐性的this绑定、是否在严格模式中等等。本篇文章不试图把关于this得每一点都去讲的一清二楚，而是，从小点到大的点去总结常见的this指向问题，而关于this指向的小点，只不过是大点的一个特殊例子而已。

背景

最近项目中，有涉及到金额的计算以及相关的运算判断，由于忽略了浮点数存在的问题，导致一些判断和计算在某些情况下出现问题，导致bug产生。虽说之前已了解浮点型计算相关问题，但没有在实际的开发过程中重视，加之之前很少接触到金额相关数字处理的业务场景，导致，重蹈前人之覆辙。在此，做一个记录和简单刨析，以加深印象。

问题

前言

在网页中，下载文件我们一般都是使用a标签指定其download属性来下载文件，比如下载excel，pdf等类型的文件，是没有任何问题的。但是，当文件链接为图片、视频或者音频类型时，此时，download属性便失效了，此时，点击a标签对应的下载链接，浏览器便会打开此文件，进行播放或者展示。遇到此种情况该如何处理呢？

背景

最近开发项目中使用后端提供的post接口导出csv表格时，遇到了导出的表格乱码的问题。之前所做的导出功能，基本都是通过浏览器get方式直接访问即可，此次通过在浏览器直接拼接参数进行请求导出的文档确实是正常的，而采取直接post请求接口的方式导出时，导出的文档出现了乱码。

前言：本文摘自我的个人cnblog博客（原文发表于2017年），并在原来的基础上进行修改，主要阐述通过一个属性即可开启浏览器中网页文件夹上传，更准确的说是input[type=file]的一个属性。本文只是做一个简单的知识点记录。

背景

当时公司所在项目，有一个文件上传小需求，要求上传文件要可以同时选择文件及文件夹，文件可以多选。如果选择文件夹即默认将文件夹内的文件全部上传。当时想到的唯一解决方案就是便利所选文件夹内的文件，然后进行上传，但始终觉得此方案不是太好，冥冥之中感觉应该是有现成的解决方案的。借助于搜索引擎，当时并未发现其他较好的解决方案，此时，我却记得某些网盘有此功能，遂研究百度网盘文件上传功能。