daily-notes
daily-notes copied to clipboard
maomao1996
不定期更新的日常笔记记录（零零散散啥都记系列）
# `package.json` 相关知识 ## 版本说明 | 字段 | 说明 | | :------- | :-------------------------------------------------------------------------------- | | `^1.0.0` | 会匹配所有 `1.x.x`版本，保持一致 `major version` (大于等于当前版本，小于 `2.0.0`) | | `~1.0.0` | 会匹配所有 `1.0.x`版本，保持一致...
# 使用 `husky`、`lint-staged`、`commitlint` 构建前端工作流 ## 作用 可以帮助我们在 `commit` 前，对代码和 `commit messages` 进行 `lint` ## 介绍 - [husky](https://github.com/typicode/husky) 是一个 `Git Hooks` 工具，让你操作 `Git Hooks` 变得更容易 - [lint-staged](https://github.com/okonet/lint-staged) 可以只对 `git` 暂存文件运行 `lint`...
# 使用 jsdelivr 加速 Github 仓库资源 当我们使用 `Github` 仓库资源时，会因为一些奇怪的原因而掉链子，但我们可以通过 jsdelivr 做 CDN 加速 [jsdelivr](https://www.jsdelivr.com/) 是一个免费的开源 CDN ## 使用方式 `https://cdn.jsdelivr.net/gh/` Github 用户名/仓库名/资源路径 默认会访问 `master` 分支下的资源，可以通过 仓库名拼接 @ + `release / commit...
# 在项目中使用 ESLint 和 Prettier（以 React + TypeScript 为例） ## 使用 CRA 初始化项目 ```sh npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript ``` ## 使用...
# Tree-Shaking 相关笔记 今天同事做完项目改造 `Code Review` 时，对 `api` 的导出形式有了点小讨论，于是今天的学习就有了 改造前 ```js export const get1 = () => {} export const get2 = () => {} export const get3 = ()...
# 使用 SVG 做动画 今天发现一个好玩的动画，想当然以为是 `GIF` 或者 `CSS3` 的成果，结果这想当然不靠谱，居然是 `SVG` 写的，于是就网上一堆操作寻找资料，自己再来个 `demo` ### demo 代码及示例 其实 demo 是为了 2.0 准备的 [在线示例](https://codesandbox.io/s/competent-framework-rfc2b?file=/index.html) ```html SVG 动画 demo ``` ### `animate` 相关语法介绍 只介绍用到的，其他的可以看下文的相关链接...
# CSS 函数 > 早上刷推看到的一个图  ## min() 计算表达式的值中最小的值作为参数值 类似 `JS` 中的 `Math.min()` 示例 ```css width: min(50vw, 500px); ``` 表示元素最大宽为 `500px`，即：小屏设备上宽度为 `window` 的一半，但在小屏设备上，不超过 `500px` ## max() 计算表达式的值中最大的值作为参数值，用法和 `min` 一致 ##...
# 使用 JS 开发命令行程序 ## 书写脚本 新建一个脚本，如 `touch maomao.js`，内容如下 ```js #!/usr/bin/env node console.log('脚本') ``` `#!/usr/bin/env node`用来表示它是一个 node 脚本 然后在命令行输入脚本路径运行即可 ## 无路径运行 在 `package.json` 配置 `bin` 选项，如 ```json "bin": { "maomao":...
# `VitePress` 生成站点地图 ## 安装依赖 > 环境和依赖版本 - `node` 18.x - `pnpm` 7.x - `vitepress` 1.0.0-alpha.51 - `sitemap` 7.1.1 ```sh pnpm add -D sitemap ``` ## 修改配置文件 > `docs/.vitepress/config.ts` ```ts...
# 从 `VuePress` 迁移至 `VitePress` 为什么要从 [VuePress](https://vuepress.github.io/zh) 迁移至 [VitePress](https://vitepress.vuejs.org)？ 因为**颜值即正义**， `Vitepress` 比 `VuePress` 好看太多太多了 ## 安装依赖 > 依赖说明 - `node` 18.x - `pnpm` 7.x - `vitepress` 1.0.0-alpha.46 - `vue` 3.2.47...