获得徽章 19
- #每天一个知识点# pnpm 是现在非常流行的 npm 包管理工具，力压 npm 和 yarn，其实也不过是解决了两个最基本的问题，一个是 node_modules 包结构被扁平化处理带来的问题，还有一个就是依赖太吃硬盘空间了。查阅官方博客（
pnpm.io），2020 至今只能看到 4 篇文章，最近两年更是一年一篇总结文，大概率今年也是这样吧，有种大道至简的感觉，非常感谢和佩服作者 Zoltan Kochan！ 展开赞过
评论1 - #每天一个知识点# - npm 从第 3版开始，package.json 中的依赖安装方式采用的扁平化处理（flattened dependency tree）。假设我们项目有一个依赖 A，A 本身依赖 B，B 又依赖 C，即
```bash
A → B → C
```
那么扁平化处理后，node_modules 中目录结构是这样的
```bash
A
B
C
```
这有效的解决了两个问题：1. 避免出现过长的路径（许多Windows工具有256个字符限制）2. 同名依赖包去重（避免重复安装）。
不过也引来了一个为人所诟病的问题——项目中虽然只依赖A ，但在代码中引入 B 或 C 包不会报错，因为 node_modules 中包含这些包名，这就会有一些隐藏很深的BUG 出现，yarn 也有一样的问题，但是 pnpm 很好地解决了这个问题展开评论点赞 - #每天一个知识点# Node v16 开始，全面支持 `node:` 协议导入，其目的是为了方便区分内置模板（built-in module）和三方模板（node_modules module）
```JavaScript
// 之前
import * as fs from 'fs/promises';
// 之后
import * as fs from 'node:fs/promises';
```展开等人赞过 28 - #每天一个知识点# husky 是一个用于管理 Git 提交的拦截工具，比如你可以通过 husky 在 pre-commit 或 pre-push 期间插入一些规则校验操作，保证提交的代码符合规范。
husky 推荐官方的 husky-init 工具对项目做初始化，具体指令：pnpm dlx husky-init && pnpm install，会做 3 步操作：
1. 将 husky 设置成 devDependencies，增加 prepare 脚本：husky install
2. 项目根目录下创建 .husky 目录，默认为我们添加了 pre-commit 这个 Git Hook（.husky/pre-commit），指示在提交修改前执行一遍 npm test 脚本（当然，我们可以自定义）
```shell
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
```
3. 将 Git hooks path 从 .git/hooks 改成 .husky （git config core.hooksPath）展开评论点赞 - #每天一个知识点# 三大前端框架 React、Vue、Angular 的创建方式
一、创建 Vue 项目
```bash
npm init vue@latest
# 或
pnpm create vite my-vue-app --template vue-ts
````vuejs.org
二、创建 React 项目
```bash
npx create-next-app
# 或
pnpm create vite my-vue-app --template react-ts
```react.dev
三、创建 Angular 项目
```bash
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open
```angular.io 展开赞过 11 - #每天一个知识点# PostCSS 类似“CSS 世界的 Babel”，是一个 CSS 编译器，通过 JS 插件方式拓展 PostCSS 的处理能力。比较常用的一些插件包括：
1. 通过 Autoprefixer 为 CSS 属性自动增加必要的三方前缀
2. 通过 PostCSS Preset Env将最新的 CSS 语法转换成大多数浏览器都能理解的语法
3. 通过 postcss-modules 来使用 CSS Modules展开评论点赞 - #每天一个知识点# Next.js Pages Router 模式下，布局组件（全站、页面级别）通过 pages/_app.tsx 文件应用。不过需要注意的是，布局文件不是页面（Page），所以目前还不能在内部使用 getStaticProps、getServerSideProps 方法。不过，可以使用 useEffect 或 SWR 之类的库在客户端获取数据。
```React TSX
import useSWR from 'swr'
import Navbar from './navbar'
import Footer from './footer'
export default function Layout({ children }) {
const { data, error } = useSWR('/api/navigation', fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>
return (
<>
<Navbar links={data.links} />
<main>{children}</main>
<Footer />
</>
)
}
```展开评论点赞 - #每天一个知识点# Next.js 默认使用 PostCSS 来处理 CSS 样式。如果需要自定义 PostCSS 配置，可以在项目根目录下创建 postcss.config.js 文件。我们以配置 Tailwind CSS 为例：
首先安装依赖：
```Bash
npm install -D tailwindcss autoprefixer postcss
```
postcss.config.js：
```JavaScript
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
```
最好在 tailwind.config.js 中指定 content 字段配置，减少 tailwindcss 的查找范围，提升编译速度：
```JavaScript
// tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
// For the best performance and to avoid false positives,
// be as specific as possible with your content configuration.
],
};
```展开评论点赞 - #每天一个知识点# Next.js 从 9.4 开始，支持从项目根目录的环境文件中加载环境变量了。我们从文件加载顺序和约定介绍下。
文件加载顺序（靠前优先级最高）：
1. `process.env`
2. `.env.$(NODE_ENV).local`
3. `.env.local` (测试环境（即NODE_ENV 值为 test）不会检查)
4. `.env.$(NODE_ENV)`
5. `.env`
**`.env*.local`** 用于存放私密数据，不应该提交，所以这些文件应该添加到 `.gitignore`。
一些约定：
- 环境变量默认只会设置 Node 环境
- 如果环境变量在浏览器环境也要使用，请带上 `NEXT_PUBLIC_` 前缀
相关链接：
-nextjs.org
-nextjs.org 展开赞过 评论1 - #每天一个知识点# @testing-library/user-event 是配合Testing Library 使用一个库，以触发事件的形式模拟用户交互。
user-event@14 开始，已不再推荐 `userEvent.click()` 使用方式，而是换成 `userEvent.setup().click()` 。v14 为了保持与 v13- 版本兼容，目前还支持旧的调用方式。
以下是从 user-event@14 开始，推荐的 `userEvent` 使用方式案例：
```TSX
import userEvent from '@testing-library/user-event'
// setup function
function setup(jsx) {
return {
user: userEvent.setup(),
// Import `render` from the framework library of your choice.
...render(jsx),
}
}
test('render with a setup function', async () => {
const {user} = setup(<MyComponent />)
// ...
})
```
相关链接：testing-library.com 展开评论点赞
pnpm.io