- 博客(175)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 String.prototype.matchAll called with a non-global RegExp argument
使用正则全局匹配MatchAll的解析与注意事项
2023-01-17 21:42:25
2191
1
原创 A value of type ‘Null‘ can‘t be assigned to a parameter of type xxxx in a const construct
A value of type 'Null' can't be assigned to a parameter of type xxxx in a const construct
2023-01-17 14:37:11
2122
原创 SOLID五种设计模式 & REACT === 更干净可读的代码
设计模式，是一个面试过程中经常问到的问题。其实有时候在我们日常开发当中，已经在使用了，只不过没有注意到而已 本文就通过面向对象编程中，最基本的五种设计模式S.O.L.I.D在React中的应用
2022-12-01 09:16:12
832
原创 __dirname is not defined in ES module scope
是规范的内置变量。如果使用了，是不会注入这个变量的。在commonjs中，注入了，, , , 五个内置变量用于实现导入导出的能力。而在esm中，因为规范已经完全不一样，故实现方式也是不一样的。在esm中，显然模块的导入导出使用/，自然不会再用/，同理，也有对应的规范写法。可以看到使用了一个关键API ，其实是ECMA规范的一部分：如上，言下之意，提供了一个模块的上下文信息，其实上文commonjs的提供的那些变量不也是上下文信息么？只不过标准不一样了，写法也不一样了。...
2022-06-20 10:27:30
3939
原创 husky pre-commit/hook/lint-staged 不起作用
如果是如下的配置是不生效的husky新版本（v5以上，当前是v8），需要单独提供脚本，放于 文件夹下。内容可以如下建议参考lint-staged的官网方式进行安装该命令会做一下三件事：最后，尝试修改一下ts, js, vue等文件，尝试。鉴于git commit 是针对指定指定类型待提交的文件进行检测。所以看下是否git add了对应文件，确认是否有待提交的对应文件…...
2022-06-07 19:31:26
2818
1
原创 ESlint Prettier Git 中使用 ignore忽略文件的规则解释
概述我们经常在项目中使用.gitignore去忽略文件，比如# .gitignore忽略项目依赖和打包文件node_modulesdist其实，除了Git，ESLint和Prettier同样提供了对应的ignore文件.eslintignore 为ESLint忽略指定文件.prettierignore 为Prettier忽略指定文件同Git，显然我们不希望对如node_modules依赖文件夹中的文件进行格式化或者做代码质量检查，所以忽略指定文件是必要的。幸运的是，ESLint和Pr
2022-04-18 14:47:37
6220
原创 mac系统下安装taro提示permission denied, mkdir ‘/usr/local/lib/node_modules/@tarojs...
如题，其实错误已经很明显了，即taro在初始化项目时需要在/usr/local/lib/node_modules/@tarojs目录下添加临时文件，但当前用户并没有权限，所以就是permission denied。我没百度，直接尝试了以下的命令chown -R xxxx /usr/local/lib/node_modules/@tarojs/其中xxxx是你的用户名，你可以用以下命名来查看whoami之后再次尝试初始化项目即可。但一般而言，临时文件不会存放到全局node_modules文件
2022-04-10 21:20:41
2287
原创 PhantomJS not found on PATH 关于PhantomJS安装问题汇总
注意是centos环境下遇到的各种问题标题中的错误是PhantomJS在全局环境变量中没有找到，所以npm install的过程中会自动安装。但过程比较曲折…我的成功解决办法npm install [email protected] --unsafe-perm以上，之所以加--unsafe-perm是因为phantomjs安装过程会创建软连接到全局变量，而phantormjs是以spawn子进程的方式创建，没有这个flag，即便使用root用户安装，同样会提示Error: EACCES: permis
2022-04-08 09:49:19
3555
原创 TS error: property values does not exist on objectconstructor
翻译一下：Object对象上不存在values属性实际上，Object.values这个API属于ES2017即，此时要求，TS编译器需要包含ES2017以上的API，才能够编译通过。那么，默认情况下，TS会以Javascript(ECMAScript)哪个版本的API为基础呢？TypeScript includes a default set of type definitions for built-in JS APIs (like Math), as well as type definit
2022-03-24 13:14:06
2075
原创 ‘await‘ has no effect on the type of this expression.ts(80007)
该错误翻译过来意思是在当前表达式前面添加await没意义await 操作符用于等待一个Promise 对象故当看到该提示，应该确认await后边的表达式是否是一个promise，比如// 确认next函数是否返回一个promiseawait next();一般这仅仅是一个警告，因为await后边也可以跟着其他表达式，比如一个常量表达式await 1;值得注意的是，await 会把该值转换为已正常处理的Promise，并在执行到微任务时才继续执行，即await仍旧是异步的。const
2022-02-06 12:29:48
8016
原创 在TypeScript使用React forwardRef
React forwardRef 用于获取子结点的DOM元素引用。当结合TS使用时，需要注意类型断言。import { forwardRef, useEffect } from "react";const Test = forwardRef<HTMLDivElement>((props, ref) => { useEffect(() => { console.log(ref.current); }, []); return <div ref={r
2021-10-09 15:29:53
5267
1
原创 Typescript Control flow analysis(控制流分析)与Type guard(类型守卫)
所谓Control flow analysis是指，typescript根据代码上下文的可以推断出当前变量类型。比如典型的类型断言：// 字符串存在substring方法// 数字存在toFixed方法const foo11 = (arg: string | number) => { // type guard (类型守卫) if (typeof arg === "string") { // 这里此时一定是字符串 arg.substring(0, 1); } else
2021-09-24 09:59:47
330
原创 Composition API TypeError: Cannot add property xxx, object is not extensible
Composition API 创建的对象必须经过初始化，如果对已经创建的对象添加新的属性，就对出现标题中的错误。const state = reactive({foo: 'bar'});Reflect.isExtensible(state); // truestate.baz = 'this is not allowed'; // 报错其实Vue仅仅是设置了对象不可扩展而已。这个错误本身是js报出的。'use strict';var obj = {};Object.preventExte
2021-07-10 18:40:27
5596
3
原创 npm link / yarn link的简单使用
当我们开发一个库的时候，不可能每次都去发布到npm或者私服，然后再去应用中安装。所以，无论npm或者 yarn都提供了link命令用以简化开发流程。以yarn为例，首先进入到库的根目录中，执行yarn link，值得注意的时候，当前目录显然应该有package.json文件，且应包含发布的名称和入口文件。比如：{ "name": "@scope/your-lib", "version": "0.1.0", "description": "", "main": "./dist/main.j
2021-06-22 12:53:41
3076
原创 nginx 403 forbiden
如果经常搞nginx，这个图想必经常会见到。其实这个问题只要仔细分析，就不难解决。对于静态资源，比如index.htmllocation / { alias /opt/www/; index index.html;}当访问比如 localhost 的时候，其实默认访问的是localhost:80/index.html，所以首先务必保证的确存在这样一个html。nginx不会列出/opt/www中所有文件。如果没有则会抛出标题中的错误。再有，检查ngi.
2021-05-29 20:57:56
139
原创 There appears to be trouble with your network connection
出现这个问题的原因基本就是你的网速很慢。有以下几个原因：你的网速真的很慢。。。你使用了很慢的源，比如官方源 https://registry.yarnpkg.com/一些二进制文件需要在本机上编译，会直接从比如github下载，而不使用taobao源等，所以即使换了源，也会很慢。一般而言，要下载的包并不会很大，如果详细的报错信息指明是超时问题。可以修改下载包的超时时间。ESOCKETTIMEDOUT以上的错误就可以尝试通过以下的参数解决yarn install --network-tim
2021-05-28 12:01:18
3257
原创 关于Vue $forceUpdate的一些理解
在官方文档上仅仅有这一句话迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。我的理解是，所谓重新渲染，仅仅是指重新渲染DOM并与原有的DOM做code diff。对于有变更的，渲染到页面。结合官方解释，可以确认有两点不会发生：不会重新触发生命周期钩子函数，比如mounted不会渲染子组件的更新，即使子组件的props发生改变了。既然如此，什么场景下会需要使用呢？我们知道，在Vue中，响应数据发生改变后，会自动触发更新，但有一些条件，不会触发更新，
2021-05-26 11:03:10
1351
原创 React return返回值要不要加括号的问题以及扩展
在react组件中返回JSX时，我们一般会这样写：function Square(props) { return ( <button className="square" onClick={props.onClick}> {props.value} </button> );}如果JSX标签仅有一行，也可以省略括号。像这样function getGreeting(user) { if (user) { return <h1
2021-05-26 09:41:22
3217
原创 Typescript error “Cannot write file xxx because it would overwrite input file
出现这个问题基本是因为开启了allowJs。因为allowJs即允许Typescript编译器去编译js。而编译之后的输出文件也就是xxx.js与源文件是一样的。所以就会报出“会覆盖输入文件”这样的错误。事实上，我们日常开发使用第三方打包工具比如webpack。编译输出是由ts-loader负责的，所以不必关心每个TS文件的输出。此时可以设置noEmits为trueNo Emit -Do not emit compiler output files like JavaScript source
2021-05-02 21:16:22
3282
原创 Javascritp Selection 与 Range
在操作文本框或者可编辑元素的时候，我们可能会使用到这两个api。在这里简单记录下区别。RangeSelectionSelection 指代的是用户选择的区域。该区域可以是多个，但目前谷歌并不支持选择多个，但Firefox应该是支持的。Range也是代表一段区域，这个这个区域是很抽象的，他不像Selection那样你看到了选择的具有蓝色背景的区域，那就是Selection。而Range可以通过js去构造并选择，而实际用户看不到任何选择。下图：selection是可以看到的Range既可以是上
2021-04-26 14:06:06
157
原创 jenkins创建下游工程（子工程）
主要使用两个插件Copy Artifact PluginParameterized Trigger pluginCopy Artifact Plugin 用于将子工程打包的出的结果保存。假设我最终会打包一个tar包。首先添加构建后操作步骤，点击归档成品这个步骤，输入用于归档的文件的名称。这个名称的地址是相对于当前工作空间的。这样配置好之后，就可以最终打包成功后保留release.tgz这个包，这个包实际上可以Jenkins中直接下载的。而Parameterized Trigger plu
2021-04-26 08:53:24
1139
原创 NO_PROXY is not set
在执行flutter doctor时候报出的问题原因是设置了HTTP_PROXY以及HTTPS_PROXY，但却没有设置NO_PROXY.检查base_profile等环境变量的文件。去掉相关的Proxy设置。
2021-04-25 16:53:53
2968
原创 An error occurred during installation: No such plugin: cloudbees-folder
在启动jenkins时候报错An error occurred during installation: No such plugin: cloudbees-folder字面意思是没有找到cloudbees-folder这个插件。有一些文章说下载这个插件到本地就好了。然而jenkins启动的时候不仅仅有这一个插件。https://github.com/jenkinsci/docker/issues/424 github issues里有一些讨论。似乎重启jenkins就可以了# 访问这个地址就是
2021-04-25 10:43:12
10919
5
原创 React Native Build Commands Failed: PhaseScriptExecution
执行yarn react-native run-ios 报错如下The following build commands failed: PhaseScriptExecution Start\ Packager /Users/yananliu/Library/Developer/Xcode/DerivedData/elsNative-hfiptduqtepejjfghnmardrdaega/Build/Intermediates.noindex/elsNative.build/Debug-iphones
2021-04-17 17:03:09
1528
原创 xcrun: error: SDK “iphoneos“ cannot be located
checking whether the C compiler works... noxcrun: error: SDK "iphoneos" cannot be locatedxcrun: error: SDK "iphoneos" cannot be locatedxcrun: error: SDK "iphoneos" cannot be locatedxcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'/Users/sim
2021-04-17 16:53:43
1335
原创 windows家庭版使用RDP Wrapper配置远程桌面
前言windows家庭版是不支持远程桌面的，专业版和企业版是支持的。所以如果电脑的windows是后二者，则可以忽略本文直接配置。RDP Wrappergithub开源软件RDP Wrapper可以帮助家庭版也支持远程桌面的功能。Github项目地址从下图所示的Release处下载最新的软件包并解压。解压后会有如下的文件列表如上三个.bat结尾的文件分别是：install.bat 安装uninstall.bat 卸载update.bat 更新可以先右键管理员身份安装，之后进
2021-04-10 10:39:16
5307
原创 Note this is for preview or E2E testing only
当执行npm run serve 的时候，若出现Note this is for preview or E2E testing only，会失去热更新（HMR）的功能。默认情况下，执行npm run serve会以development的模式启动。但项目中中配置了.env.development，则要正确配置NODE_ENV# 需要配置为development# NODE_ENV=productionNODE_ENV=development更优雅的做法是保留.env.development的配置
2021-04-05 15:45:37
989
原创 Reflect.has / Reflect.ownKeys / in / getOwnPropertyDescriptor 等几种获取对象属性的区别
可以把获取属性的这些API分成几部分：均可以获取普通属性，这是必然的…是否可以获取不可枚举属性是否可以获取Symbol属性是否可以获取存在于原型上的属性而具备访问对象属性的api分为以下部分Reflect 静态方法(has() / ownKeys() 等)Object 静态方法（getOwnPropertyNames 等）in 操作符，包含直接使用或者for in 使用当然还有.操作符或者[‘key’]这样直接访问可能ES标准委也觉得这么多访问属性的api多少有些难为开发者。所以
2021-04-02 10:11:18
983
2
原创 Javascript 获取图片的真实宽高和文件大小
获取图片的真实尺寸getImageSize(imgSrc) { return new Promise((resolve, reject) => { const newImg = new Image(); newImg.onload = () => { resolve([newImg.width, newImg.height]); }; newImg.onerror = (err) => { reject
2021-03-28 21:02:04
1147
原创 vue-cli 项目修改@的默认路径
vue-cli项目默认为src目录提供了别名@可按如下方式修改默认的路径// vue.config.jsconst path = require('path')module.exports = { chainWebpack: config => { config.resolve.alias .set('@', path.resolve(__dirname, 'path/to/desination')); }}或者自定义更多路径// v
2021-03-25 12:56:09
2486
原创 element-ui 按需加载情况下覆盖预置scss变量
element-ui的默认主题theme-chalk是通过scss预编译的，可以通过修改scss变量达到修改主题的目的。在项目中改变 SCSS 变量Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：/* 改变主题色变量 /$–color-primary: teal;/ 改变 icon 字体路径变量，必需 */
2021-03-24 17:12:15
4739
2
原创 JS中获取cookie的最简单方式
const getCookie = (name) => document.cookie.match(`[;\s+]?${name}=([^;]*)`).pop();// 比如cookie如下： a=b; c=d// 使用getCookie('c') // d其中match是字符串的原型方法。str.match(regexp)如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp以上，所以完全不必写一个正则，因为正则拼字符串还
2021-03-20 13:11:49
4732
原创 Vue.nextTick(this.$nextTick) 与响应式数据的原理
// 各种错误判断和兼容代码略过了。function nextTick (cb, ctx) { // 你传入的回调函数会被依次放入到callbacks数组中。 callbacks.push(function () { cb.call(ctx); }); if (!pending) { pending = true; timerFunc(); }}上边就是调用的nextTick函数// Vue.nextTick 和 this.$nextTick是等价的。
2021-03-20 09:55:14
535
原创 Javascript中Map与Object的区别
典型的区别Map可以将任何数据类型作为key，而Object，只能使用String或者Symbol。一个 Map的键可以是任意值，包括函数、对象或任意基本类型。const map = new Map();map.set(NaN, 'NaN'); map.get(NaN) // NaNmap.set(null, 'null'); map.get(null) // nullmap.set(undefined, '未定义'); map.get() // 未定义Map的键是按插入顺序
2021-03-18 15:05:27
748
原创 JS中快速格式化JSON字符串
原始JSONconst obj = {a:1,b:{c:2},d:3};格式化代码// 第二参数可以是一个函数用于过滤每一个key，若传null，则所有key都参与格式化。// 第三参数是缩进大小JSON.stringnify(obj, null, 2)格式化结果"{ "a": 1, "b": { "c": 2 }, "d": 3}"如果JSON太长，那么格式化之后的结果如果想复制就很麻烦。谷歌的控制台人性化的帮你提供一个copy方法控制台中输入以下命令后会
2021-03-15 17:41:45
1209
原创 error TS1192: Module ‘“fs“‘ has no default export.
出现这个错误的原因是：fs模块没有默认导出。事实上，fs模块的确没有默认导出。因为fs是遵循cjs规范写的。即类似于这种导出：module.exports = fs = { readFile, readFileSync, ...}而如果直接使用import fs from 'fs'就会导致出现标题中的错误（TS编译情况下）。固导包的时候需要使用如下的方法：import * as fs from 'fs'看起来有些麻烦，事实上，如果尝试使用babel进行编译（不是tsc），就不会
2021-03-15 16:58:40
4326
原创 first-child 与 first-of-type
二者均是用于选择某父级元素的第一个子元素。区别如下：<div class="parent"> <div>Child</div> <!-- div:first-child, div:first-of-type --> <div>Child</div> <div>Child</div> <div>Child</div></div><div class=
2021-03-13 12:19:31
697
原创 vue服务端渲染vue-server-render支持的模板语法
在vue ssr官方文档中，并没有一一说明渲染模板都支持那些语法。仅仅是简单的说了，支持{{}} 转义插值{{{}}} 插入HTML如果想使用别的模板语法，官方并未提及。其实，他的模板语法支持的不止于此，因为其也是使用了第三方库loash.template api。lodash给人的感觉就是小而美。比如你完全可以通过语法判断去实现一些逻辑。比如如下判断是否需要插入某个JS. <% if (routerPath === '/') {%> <script src
2021-03-12 16:54:03
332
原创 Vue中的Provide/Inject 实现响应式数据
Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的以上引用自官网可能之所以这样设计，是为了避免数据的混乱。就如同props不能被子组件直接修改一样。从代码角度讲 data() { return { foo: 'foo', bar: 'bar' baz: {hello: '
2021-03-12 11:44:18
11690
3
原创 Eslint Unable to resolve path to module ‘@‘
在webapck + eslint的项目中，若给webpack配置了alias，但eslint未能正确配置路径别名，则会报错。// webpack.config.js resolve: { // 配置别名，在项目中可缩减引用路径 alias: { '@': path.resolve('app/web') } },如上，在vue-cli初始化的项目中，已经为你配置好了，但若是自己搭建的项目，则可能出现标题中的错误，因为eslint并不会自动读取webpack中
2021-03-10 14:24:28
10254
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人