kshao-blog

本篇主要介绍 webpack 中的 externals 如何使用，顺带浅析一下 webpack 内部实现。 Externals对于 Externals 就不过多描述了，蹭下热度，把这个问题交给 AI 小助手。 使用 Externals项目目录在 codesandbox 中预览项目，run build or build-externals |--pages/| |--A.js|--App.js|--index.js|--webpack.config.js // Pages/A.jsimport React from "react";import { get } from "lodash";import { Button } from "antd";const A = () => { const obj = { a: 1 }; return ( <div> <Button onClick= ...

这标题你还不进来？关键词 拿捏 🤌 bat 脚本复制下面这段代码，新建记事本，粘贴，重命名扩展为 bat，管理员打开运行即可 reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /d "%systemroot%\system32\imageres.dll,197" /t reg_sz /ftaskkill /f /im explorer.exeattrib -s -r -h "%userprofile%\AppData\Local\iconcache.db"del "%userprofile%\AppData\Local\iconcache.db" /f /qstart explorerpause 注册表修改 Win + R 打开运行窗口，输入 regedit，打开注册表窗口 展开注册表找到路径： HKEY_CLASSES_ROOT\lnkfi ...

在正常迭代中或多或少遇到过需要将当前迭代的某一功能提前发布的需求（点名批评产品~），要是按功能建的分支的话直接 merge 或 rebase 就可以了，若分支管理不规范或者真的只需要当前分支的部分代码时 cherry-pick 就派上用场了 cherry-pick usagegit cherry-pick 将指定的 commit 应用于当前分支，并在当前分支产生新的 commit 且生成新的 commit hash Eg:代码仓库模型：master 和 feature a - b - c - d Master \ e - f - g Feature 现在将 Feature 分支的 commit f 提取到 master 分支 git cherry-pick f Result: a - b - c - d - f Master \ e - f - g Feature 如何在 Master 分支拿到 Feature 分支的 commitHash 呢？小 Tips： # target 一般为 origingit l ...

最近在 GitHub 上”学习”的时候发现了别人在用 MessageChannel，这个 Api 很少见（没见过）基本不了解如何使用，搜了下 发现 React 和 Vue 都使用过~ 这不学习学习跟同事小装一手？ 介绍 Message ChannelMessage Channel 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（例如两个 Iframe，文档主体和 Iframe，worker 之间或 window.open 的窗口）来直接通讯，在每一端使用一个端口（port）通过双向频道（Channel）来传递信息。 Message Channel 是以 Dom Event 的形式发送信息，属于异步的宏任务。 使用 使用 MessageChannel() 构造函数来创建通讯信息，获取两个端口的 Message Port 对象：Port1、Port2 端口之间可以互相通信 端口接受到无法被序列化的消息时，使用 onmessageerror 处理 使用 close 关闭端口 示例const { port1, port2 } = new Messag ...

最近在看 useWorker 库的时候发现该 hook 只需传入函数即可运行，虽然说 worker 不经常使用，但是就酱紫直接用不需要一个 js 文件承接？ 来看看 MDN 中如何创建一个 Worker var myWorker = new Worker('worker.js'); 再看看 useWorker 如何使用 useWorker Usageimport React from 'react';import { useWorker } from '@koale/useworker';const numbers = [...Array(5000000)].map((e) => ~~(Math.random() * 1000000));const sortNumbers = (nums) => nums.sort();const Example = () => { const [sortWorker] = useWorker(sortNumbers); cons ...

最近在看 React 18 时，发现 18 已经默认将你的状态更新进行批处理了，不需要再像 16、17 内使用 unstable_batchedUpdates 这种 Hack Api 了～ 什么是批处理？批处理是将多个状态更新分组到单个 re-render 内，以获得更好的性能操作。 比如在同一个点击事件内更新两个 state，React 将会把它们分到一个 render 内重新渲染，看下方 demo 内的 console 可体现。 17 Batch Demo：批处理 在多个状态更新的时候，批处理可以避免不必要的重新渲染。然而在旧版本内何时批处理也并不完全一致，比如在 click 内去请求数据后再更新 state，此时 react 则不会批量更新，而是进行两次独立的更新 17 Batch Demo: 不批处理外部事件处理程序（注意 render 次数） 在 React 18 之前，React 只在事件处理程序期间批量更新。默认情况下，React 不会对 Promise、setTimeout、原生事件处理程序（native event handlers）或其他的Re ...

最近在下载 PDF 时发现谷歌浏览器(104.0.5112.101)有时打开有时预览，这能忍？经过一番百度发现，在隐私设置和安全性 => 网站设置 => 更多内容设置 => PDF文档中可看到相关设置～ 默认预览 PDF 不预览直接下载

前言： 温故知新，less 文档 Parent Selectors 复习~ Parent Selectors

最近在维护项目时发现一段代码：window.location.href="#/xxx"，乍一看为啥不用 react 提供的路由跳转方式呢？看了一眼文件路径，在 utils 文件内，想了下在这里 history 对象去哪找呢？ Router 由于项目为 Hash 路由，连夜百度了下，确实有相关属性供我们使用 createHashHistory 由之前的 import { HashRouter } from 'react-router-dom';function App() { return <HashRouter>xxx</HashRouter>;} 改为 import { Router } from 'react-router-dom';// history 为 react-router-dom 依赖，直接引入即可import { createHashHistory, createBrowserHistory } ...

允许谷歌浏览器加载不安全内容 一段代码将站点内所有资源都转为 https 前言 最近在Chrome中遇到了https站点加载http图片资源失败了，新页面打开图片且在火狐中打开网站也能正常显示。仔细看了下接口返回的资源协议是 http 但到了 dom 上变成了 https 了，开始怀疑人生了~ 允许谷歌浏览器加载不安全内容 几经周转终发现，谷歌浏览器版本 84 之后会组织 混合内容 的加载，若要开启 混合内容 的加载可在网址左侧的 查看网址信息 - 网站设置中更改 到此即可访问 http 内容（不推荐长期使用此方法） 一段代码将站点内所有资源都转为https 如上，谷歌浏览器会将https站点内所有的资源默认使用 https，但其他浏览器仍将按资源默认协议请求，可使用 Meta 标签来处理 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> http-equiv该属性定义了一个编译指示指令，这个属性叫 ...