天心天地生-CSDN博客

微信小程序目前为止还没有提供API或者具体的配置方式，给我们设置环境变量，所以还得自己想办法。创建一个 shell 脚本——一个由诸如 Bash 或 zsh 之类的 shell 执行的脚本——可以是自动化重复任务的好方法。Node.js 似乎是编写 shell 脚本的理想选择，因为它为我们提供了许多核心模块，并允许我们导入我们选择的任何库。它还使我们能够访问 JavaScript 提供的语言特性和内置函数。

2023-07-12 17:56:40 1123

原创【bug】umi某个页面无法触发热更新

在使用umi项目开发过程中,发现某个页面无法触发热更新,其他页面可以。

2023-05-29 16:31:37 536

原创 npm依赖更新无效

项目是使用[email protected]搭建的react项目项目需要替换新版本的sdk,使用npm进行对应sdk的版本升级。依赖未生效

2023-05-18 09:37:42 563

原创 VSCode快捷键总结（mac版）

注意：本文针对的mac电脑下的快捷键，windows电脑下请自行切换。

2023-05-11 10:30:51 1320 1

原创 js 对象的过滤

JavaScript的对象不像数组或字符串那样可以迭代，所以我们不能直接在对象上使用filter()方法。在这篇文章中，我们将探讨如何利用JavaScript中的es6方法结合数组的filter()方法来过滤一个对象。filter()允许我们在一个数组中进行迭代并且只返回该数组中符合特定条件的项目到一个新数组中。

2023-04-24 11:51:51 1464

翻译 Chrome调试工具使用断点进行debugger

通过 Chrome DevTools 调试功能的综合参考发现新的调试工作流程。

2023-04-06 14:08:28 753

原创 eslint自定义规则(禁用 localStorage和sessionStorage)

项目为了统一管理localStorage和sessionStorage,使用了统一的方法对Storage进行存取.为限制项目成员直接使用和,需要通过eslint对直接引用的形式加以限制。

2023-03-21 15:05:52 272

原创【bug】antd全局的主题色样式被覆盖,被修改为`antd`默认的主题色

【bug】antd全局的主题色样式被覆盖,被修改为`antd`默认的主题色

2023-03-09 10:10:36 809

原创多个setstate的合并

在同步方法内执行setState,多个setState会被合并成一个执行在异步方法内执行setState,多个setState会分开执行/*** desc: 打开控制台查看打印结果// 列表刷新 const [ results1 , setResults1 ] = useState('results1');console . log('请求结束' , res . json());saveData(` 异步- ${ new Date() . getTime() } `);

2023-01-31 14:25:53 500

原创 react中使用useEffect模拟componentDidUpdata(使 useEffect 在渲染时不执行，只在数据变更时执行)

在列表搜索条件变化时,需要保存搜索条件,但是保存搜索条件这个方法不需要在组件挂载时执行,即如何使 useEffect 在渲染时不执行，只在数据变更时执行(即模拟类组件的componentDidUpdata)

2023-01-31 11:30:24 1027 2

原创 Typescript中的类型联动

typescript类型联动，指的是一个对象中，A属性的值变化，会引起B属性的类型变化。

2022-12-15 17:07:18 309 1

原创 JSON Schema的应用(具体的使用场景)

借助vue、react框架组件化理念以及动态渲染组件能力，涌现了许多基于JSON Schema配置文件渲染表单或者组件的库，有效解决通用性组件大量重复使用的场景。通过JSON配置组件乃至页面，能够使代码转化为文件，使数据得以导入导出，便于迁移储存。另外也可以开发可视化编辑器，通过拖拽交互，生成JSON文件，降低开发使用难度。基于这一系列的方案，使开发效率大大提升和降低后续的代码维护。

2022-10-21 17:58:46 3555

原创 react 图片剪切(react-easy-crop)

react实现图片剪切

2022-09-29 11:53:39 1912

转载 Vue 中 computed ,watch,methods 的异同

computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。1、watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。当处理页面的数据变化时，我们有时候很容易滥用watch，而通常更好的办法是使用computed计算属性，而不是命令式的watch回调。

2022-09-23 16:29:15 211

原创 react中获取dom元素的高度(table铺满屏幕剩余高度)

react中获取dom元素的高度(table铺满屏幕剩余高度)使用antd写了一个table,为了交互上友好;要求如下1. 下图红色区域铺满屏幕剩余高度;2. table高度不限,有纵向滚动条;3. 页面不允许出现纵向滚动条;

2022-08-10 19:07:10 5224

原创 lerna publish时报错 E401 [UNAUTHORIZED] Login first

lerna publish时报错 E401 [UNAUTHORIZED] Login first

2022-08-02 13:18:59 2139 1

原创 safari浏览器打不开localhost(http)本地环境,将资源指向了https

使用umi(2.0)启动项目进行本地开发例如：使用safari浏览器访问本地地址后报错如下(谷歌浏览器正常)注释掉如下mate标签原理解析:HTTP Content-Security-Policy(CSP) upgrade-insecure-requests指令指示用户代理将站点的所有不安全 URL（通过 HTTP 提供的 URL）视为已替换为安全 URL（通过 HTTPS 提供的 URL）。该指令适用于具有大量需要重写的不安全遗留 URL 的网站。CSP: upgrade-insecure-reque

2022-06-21 10:30:58 2380

原创 umi项目中使用html-loader引入html文件报错`this.getOptions is not a function`

通过umi配置项chainWebpack添加了`html-loader`,运行项目的终端报错`TypeError: this.getOptions is not a function`

2022-06-06 17:13:45 883 1

原创 Formily 如何开发一个自定义表单控件（上）

背景在我们使用formily开发的时候，不可避免会遇到定制组件的需求。定制组件主要分为两种情况：该功能底层组件支持，需要属性映射该功能底层组件不支持，需要对底层组件进行定制开发本篇文章介绍第一种情况，该功能底层组件支持，需要属性映射编码实战schema中有一个自定义的属性withCount，input本身没有该属性，需要通过mapProps做映射处理demo地址demo-定开组件-属性映射组件jsimport React, { useMemo } from 'react';im

2022-05-19 15:35:41 4290 2

原创 typescript报错：当switch的条件为true时ts没有校验case中的条件

问题描述当switch的条件为true时ts没有校验case中的条件有问题的代码type Pos = { index: number; deviation: string; }| null |false; const getPos=(type:number):Pos=>{ switch (type) { case 1: return { index: 1, deviation: '1'}; case 2: return null;

2022-05-06 16:33:04 1092

原创 JS POST请求发送文件同时发送其他参数

通常的POST请求的业务场景，不是上传文件，就是提交表单，很少遇到上传文件同时需要提交表单信息，但是如果遇到了应该如何处理呢?let formData = new FormData(); // 创建form对象formData.append('file', file); // 通过append向form对象添加文件数据formData.append('a', 'a'); // 添加form表单中其他数据formData.append('b', 'b'); // 添加form表单中其他数据const

2022-05-05 14:57:18 3730 1

原创 lerna 生成自定义日志changelog

背景使用lerna自带的配置生成自定义的日志--changelog-presetlerna version --conventional-commits --changelog-preset angular-bitbucket默认情况下，更改日志预设设置为angular. 在某些情况下，您可能想要更改使用另一个预设或自定义预设。预设是常规变更日志的内置或可安装配置的名称。Presets 可以作为包的全名或自动扩展的后缀（例如，angular扩展为conventional-changelog-an

2022-04-28 17:57:33 1520

转载深入 lerna 发包机制 —— lerna version(源码解析)

最近在公司做的 monorepo 相关工具开发的时候有涉及到这方面的内容，于是对这方面进行了一些研究。lerna 官网关于 lerna 的描述是这样的:A tool for managing JavaScript projects with multiple packages.本质上 lerna 是一个用来管理 monorepo 项目的工具，主要解决了下面的问题:将大型代码仓库分割成多个独立版本化的软件包（package）对于代码共享来说非常有用。但是，如果某些更改跨越了多个代码仓库的话将

2022-04-27 15:51:23 987 2

转载深入 lerna 发包机制 —— lerna publish(源码解析)

前言：lerna 作为一个风靡的前端 monorepo 管理工具，在许许多多的大型项目中都得到的实践，现在笔者在公司中开发的 monorepo 工具中，monorepo 中子项目的发包能力就是基于 lerna 来完成，因此本篇文章将讲解发包中最关键的命令即 lerna publish。在上一篇文章中介绍完了 lerna version 的运行机制后，那么在本篇文章中我将继续介绍一下 lerna 发包机制中最关键的一个 command 即 lerna publish。现在我们来继续介绍 lerna p.

2022-04-26 10:46:39 2921 1

原创 js中浮点数的计算(求和)

问题描述js中的浮点数有精度问题：浮点数精度问题，比如 0.1 + 0.2 !== 0.3解决方案demo地址把浮点数转化为字符串，模拟实际运算的过程。import React, { useState } from 'react';import { InputNumber } from 'antd';import styles from './FloatNumSum.less';export interface FloatNumSumProps extends React.HT

2022-04-24 19:36:59 4759 4

翻译 typescript 中的 interface 和 type 到底有什么区别？

typescript 中的 interface 和 type 到底有什么区别？

2022-03-01 18:13:35 441

原创 git 规范

用户名1、背景项目开发过程中会出现诸多代码方面的问题需要及时修复，但因大家git提交用户名过于个性化，查看git提交记录/代码评审时无法快速定位或联系到相关代码提交Author。2、解决措施请检查git用户名和email是否与本人信息相符（要求：git用户名可为姓名拼音全拼/中文/工号），若不相符，请在本地git终端输入以下命令进行修改：修改当前项目的用户名和邮箱地址：$ git config user.name "username"$ git config

2022-02-16 17:17:29 403

原创 fixed定位嵌套导致无法覆盖其他元素

问题描述fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>css 定位</title> </head> <body> <style> .root {

2021-12-16 23:59:51 2095

转载使用tree生成目录树结构

背景介绍有时候,当你完成一个项目后,想要展示这个项目的目录结构(如下图所示),对该项目进行文档描述性说明,用于解释其项目中各个目录以及文件代表的含义,这样便于自己和后来的同学理解,在实际开发中,对于接收毫无文档说明的project,是非常痛苦的,一份好的readme文档也是非常重要的,那怎么办?逐行手写?当然不是,接下来,一步一步带你见证奇迹基于tree-node-cli类似树的格式列出目录的内容，类似于Linux树命令。提供了CLI和Node API 安装:npm install -g tree-

2021-12-15 09:54:50 2033

转载 React将子节点渲染到存在于父组件以外的 DOM 节点

PortalsPortal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。用法通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：render() { // React 挂载了一个

2021-09-23 10:47:48 731

转载观察者模式 vs 发布订阅模式

有一回面试，面试官问：观察者模式，和发布订阅模式，有什么区别？我脑海中立刻闪现了《Head First设计模式》里讲的：Publishers + Subscribers = Observer Pattern“哼哼，我知道答案了，兄dei！”，我内心无比鸡冻。“它们是一样的。”，我故作镇定，嘴角露出一丝微笑，仿佛下一秒钟面试官就会给我发offer。面试官也笑了，“不，它们不一样”。然后我就：So, 为什么我错了？观察者模式（Observer pattern），和发布订阅模式（Pu

2021-09-17 14:24:41 109

转载 Window postMessage() 方法

Window postMessage() 方法定义和用法postMessage() 方法用于安全地实现跨源通信。语法otherWindow.postMessage(message, targetOrigin, [transfer]);参数说明otherWindow其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。message将要发送到其他

2021-08-09 22:03:45 458

转载 Rollup 打包并发布到 npm

前言其实用 webpack 也可以打包库，不过根据create-react-app项目贡献者的说法：rollup适合发布 js 库，而webpack更适合做应用程序。简而言之就是：rollup 打包 js 比 webpack 方便，而 webpack 打包 css 比 rollup 方便，相信大家已经有所了解了，至于选用哪个相信大家已经清楚了，下面我们来详细讲解如何用 rollup 打包 js 库步骤。初始化项目使用npm init命令生成package.json 文件，输入 name、version

2021-06-30 21:02:06 1026

原创多包管理工具lerna搭建项目---基本常用命令

基本常用命令Step 1 安装Lerna推荐全局安装，因为会经常用到 lerna 命令npm i -g lernaStep 2 项目初始化lerna init其中 package.json & lerna.json 如下:// package.json{ "name": "root", "private": true, // 私有的，不会被发布，是管理整个项目，与要发布到npm的解耦 "devDependencies": { "lerna": "^3.15.0

2021-06-18 15:49:32 2283

空空如也

空空如也