.nrmrc和.yarnrc配置镜像源

3 月 3 日
阅读 3 分钟
561
用途使用npm或者yarn安装依赖时,指定依赖的镜像源。示例使用npm安装依赖 {代码...} 使用小于yarn@2.0安装依赖 {代码...} 使用大于等于yarn@2.0安装依赖 {代码...} 注意事项如何单独为某个包指定镜像源?npm和yarn均无法为单个包配置镜像源。 {代码...} 配置文件的优先级如何?配置文件有优先级之分。项目根目录中的要比...

当遍历遇上异步请求

3 月 2 日
阅读 4 分钟
209
目标遍历请求时,让请求依次执行(等待前一次请求响应后再发起下一次请求)并且等待所有请求完成。示例前置物料 {代码...} for(数组和对象) {代码...} 输出结果:请求依次执行并且等待所有请求完成。for of(适用于数组) {代码...} 输出结果:请求依次执行并且等待所有请求完成。for in(适用于对象) {代码...} 输出...

git restore极简使用记录

3 月 1 日
阅读 1 分钟
469
用途撤销修改。使用示例前置知识工作区(Changes) > 暂存区(Staged Chagnes)修改文件后,文件会出现在工作区。git add .或者git add filename后,文件会出现在暂存区。用法1把文件从工作区Changes下丢弃。 {代码...} 执行git restore .后,Changes被清空并隐藏了。用法2把文件从暂存区Staged Changes下退回到Changes。...

patch-package极简使用记录

2 月 29 日
阅读 1 分钟
170
用途保存node_modules文件夹中对包的修改,避免重新安装依赖时被重置。示例物料准备:一个你想要修改的npm包,这里用refanbanzhang这个包来演示。操作流程(初次使用):安装npm install patch-package。定位到refanbanzhang包中并进行修改。执行npx patch-package refanbanzhang。重新安装npm install refanbanzhang。...

构建流程问题记录

2 月 29 日
阅读 1 分钟
177
修改镜像源后,如果没有更新或者删除.lock文件,因为如果存在的话,使用yarn install/npm install还是会按照.lock文件里面的硬编码原地址去下载,需要留意。

LF will be replaced by CRLF(eol)

2 月 27 日
阅读 2 分钟
645
前置知识LF代表linux风格的行尾字符\nCRLF代表windows风格的行尾字符\r\n发生原因在提交代码的时候,git检测到非当前系统设置的换行符,git会将其进行转换。如何解决?通过设置git的core.autocrlf属性来解决。接下来我们就来了解一下core.autocrlf,然后用来解决我们的问题。如何读取当前git config core.autocrlf的设置...

chrome网络面板的4种过滤方式

2 月 26 日
阅读 1 分钟
195
初始状态关键字totalValue只显示包含totalValue的请求排除-totalValue只显示不包含totalValue的请求正则/ad$/只显示以ad结尾的请求正则也可以组合排除使用-/ad$/只显示不以ad结尾的请求查看特定域domain:*dida365.com只显示域名中包含dida365.com的请求

当useEffect遇到函数依赖

2 月 24 日
阅读 3 分钟
563
什么原因?问题出在onKeyup内部的onSubmit,由于onSubmit所在的useEffect没有依赖,所以只会在初始化执行一次,onSubmit内部的username也就会一直处于初次渲染的状态,值为空字符。

代码优化记录

2 月 21 日
阅读 3 分钟
357
使用reduce时,避免对accumulator执行副作用 {代码...} 去掉副作用 {代码...} 优化对一份数据的多次遍历 {代码...} 使用reduce来改进: {代码...} 去掉副作用代码: {代码...} 对find的结果进行判空 {代码...} 上面的代码中,我们在find的返回值上直接访问属性,会有可能导致异常。因为在没有找到目标时,find的返回值会...

fetch的使用记录

2 月 21 日
阅读 1 分钟
272
如何用fetch发起post请求下面是一个用fetch发起的post请求示例: {代码...} 注意事项:如何传递post参数?设置Content-Type为application/json将post参数转换为字符串,需要用到JSON.stringify如何解析响应?需要对fetch返回的响应调用json方法。因为fetch返回的是一个Response对象,不能直接读取数据,所以需要对其先调...

git连接远程仓库的方式

2 月 21 日
阅读 1 分钟
642
将本地仓库推送到远程仓库当前状态:本地仓库没有关联远程仓库远程仓库有一个main分支1 将本地仓库与远程仓库关联 {代码...} 2 修改本地分支名称 {代码...} 3 设置本地分支main跟踪远程分支main {代码...} 4 推送本地内容到远程 {代码...} 将本地仓库与远程A连接修改为与B连接1 查看本地仓库当前连接的远程仓库(无副作...

ES modules的导出方式

2 月 20 日
阅读 1 分钟
154
对于Named Exports的导出方式,如果非要使用对象的访问方式,则可以使用* as xxx语法,将模块中所有Named Exports导出的数据合并为一个对象,来达到目的。

CommonJS的两种导出方式

2 月 20 日
阅读 1 分钟
278
至于为什么两者没有差异,原因也很简单。module.exports和exports是相等的,因为exports就是引用自module.exports。

vscode配置项记录

2 月 19 日
阅读 1 分钟
337
emmet.triggerExpansionOnTab输入标签名时,自动补充完整的标签 {代码...} 输入div点击tab得到<div></div>emmet.includeLanguages比emmet.triggerExpansionOnTab更好用 {代码...} 输入div点击tab得到<div></div>

craco是如何实现对非.module.less文件开启css modules的?

2 月 19 日
阅读 1 分钟
148
创建了两个loader,分别是lessRule和lessModuleRule,这两个loader里面都开启了css modules。lessRule的css modules配置lessModuleRule的css modules配置

vscode修改文件名或者移动后,自动更新import的功能,对样式文件无效

2 月 18 日
阅读 1 分钟
505
vscode中的Update Imports On File Move功能无效的问题排查目前的收获是:该功能只对js ts文件生效,对css json文件无效。继续研究。。。其它:vscode的Vetur插件也有一个Update Import On File Move配置,只对.vue文件生效。

webpack使用记录

2 月 17 日
阅读 2 分钟
347
因为通过webpack.DefinePlugin配置进去的值是一个全局变量,默认情况下eslint会阻止全局变量的使用,除非你明确的通过配置告诉他你知道你在干什么。

package.json配置项记录

2 月 17 日
阅读 2 分钟
204
包里面的bin字段相当于在说:“嗨npm,如果待会儿有人执行gh-pages这个命令,就去我目录下找bin/gh-pages.js这个文件”。

vscode如何在文件目录上,快速定位到node_modules的包位置?

2 月 17 日
阅读 1 分钟
765
修改vscode配置在vscode的settings中找到Auto Reveal Exclude,如果发现条目中有node_modules,将其删掉。选中目标包名在包名上右键,选择Go to Definition。完成我们就会进到包内部,并且vscode左侧的目录也会自动定位并展开。

craco使用问题记录

2 月 17 日
阅读 1 分钟
198
如何配置less? {代码...} 如何配置路径别名(alias) {代码...}

css modules的导入方式差异

2 月 17 日
阅读 1 分钟
239
物料 {代码...} 导入.css后缀文件import './style.css'body样式生效,:global样式不生效import style from './style.css'body样式生效,:global样式不生效,style为空对象导入.less后缀文件import './style.less'body样式生效,:global样式不生效import style from './style.less'body样式生效,:global样式不生效,styl...

如何在vscode中调试代码?

2 月 16 日
阅读 4 分钟
1.1k
调试前端代码1 在项目根目录下面创建./vscode/launch.json文件,内容如下 {代码...} 2 启动你的本地项目示例npm start3 按f5启动调试vscode会自动打开浏览器,然后跳转至上述配置中url指向的地址。4 添加断点在vscode中找到需要添加断点的代码行,点击行号左侧添加断点。5 刷新浏览器,当运行到断点处,代码就会停住,然...

对象方法用途记录

2 月 16 日
阅读 1 分钟
566
entries注意:这是一个静态方法而非原型方法。用途:需要将对象转换为数组进行处理时。该方法接受一个对象,然后返回一个数组,该数组的每个元素为一组对象的键名和键值。 {代码...} 用于结合map、filter、reduce等声明式函数进行无副作用的数据加工。下面是对obj进行遍历并统计每个人的合计得分示例: {代码...} Object....

数组方法用途记录

2 月 15 日
阅读 1 分钟
309
some接受一个函数,然后some会使用这个函数遍历整个数组,如果该函数至少有一次返回true,则some返回true,否则返回false。

如何通过css变量实现主题切换?

2 月 6 日
阅读 1 分钟
483
目的采用css变量来切换应用的主题。手段1 定义好主题需要的css变量 {代码...} 2 全局引入上面定义的css变量 {代码...} 3 实现切换主题class的逻辑 {代码...} 4 在应用中各个位置引用全局引入的css变量 {代码...} 这样,当html元素的class在light和dark之间切换时,css变量--custom-background的值也会在white和black之间...

css之white-space

2 月 5 日
阅读 1 分钟
392
作用指明浏览器如何对待空白符。属性值normal去掉首尾空白符合并连续空白符将换行符和制表符转换为空白符,然后再执行2自动换行nowrap在normal的基础上,关闭自动换行pre保留首尾空格不合并连续的空格不转换换行符和制表符为空格关闭自动换行pre-wrap在pre的基础上开启自动换行,属性值名上已经明示了。pre-line去掉首尾...

css的文本换行之word-break

2 月 1 日
阅读 1 分钟
448
用途用于打断单词属性normal(浏览器默认表现)剩余位置无法容纳当前单词时:● 如果是首行,单词将溢出容器。● 如果非首行,将单词放到下一行,如果下一行仍然放不下,单词将溢出容器。break-all剩余位置无法容纳当前单词时,把单词打断为两部分,一部分塞到当前行的剩余位置,另一部分放到下一行,如果下一行容纳不下,...

css的文本换行之word-wrap

1 月 29 日
阅读 2 分钟
433
用途避免文本溢出容器属性normal(浏览器默认表现)剩余位置无法容纳当前单词时:如果是开头,单词将溢出容器。如果非开头,将单词放到下一行,如果下一行仍然放不下,单词将溢出容器。anywhere当前行剩余位置无法容纳当前单词时:如果是开头,打断单词。如果非开头,将单词放到下一行,如果下一行仍然放不下,则打断单...

react项目问题记录

1 月 16 日
阅读 3 分钟
755
这是由于useEffect在设计上决定的。useEffect接受一个函数,这个函数返回undefined或者一个函数(用于cleanup)。

js项目接入ts

2023-11-07
阅读 1 分钟
242
第一步 安装依赖yarn add typescript ts-loadertypescript核心ts-loader配合webpack编译第二步创建tsconfig.json文件第三步在webpack配置文件中添加ts-loader配置 {代码...}