Skip to content

Commit 244cc7e

Browse files
ghx9908ghx9908
committed
feat: postcss
1 parent 6cf3e96 commit 244cc7e

File tree

3 files changed

+299
-31
lines changed

3 files changed

+299
-31
lines changed

‎source/_posts/2023-07-06-代码风格配置.md‎

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ pnpm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-es
3838

3939
**.eslintrc.js**
4040

41+
1. 案例 1
42+
4143
```js
4244
const { defineConfig } = require("eslint-define-config")
4345
module.exports = defineConfig({
@@ -47,11 +49,7 @@ module.exports = defineConfig({
4749
node: true,
4850
es2021: true,
4951
},
50-
extends: [
51-
"eslint:recommended",
52-
"plugin:@typescript-eslint/recommended",
53-
"plugin:vue/vue3-essential",
54-
],
52+
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-essential"],
5553
parser: "vue-eslint-parser",
5654
parserOptions: {
5755
parser: "@typescript-eslint/parser",
@@ -599,19 +597,7 @@ module.exports = {
599597
"type-enum": [
600598
2,
601599
"always",
602-
[
603-
"build",
604-
"chore",
605-
"ci",
606-
"docs",
607-
"feature",
608-
"fix",
609-
"perf",
610-
"refactor",
611-
"revert",
612-
"style",
613-
"test",
614-
],
600+
["build", "chore", "ci", "docs", "feature", "fix", "perf", "refactor", "revert", "style", "test"],
615601
],
616602
},
617603
}
@@ -625,20 +611,9 @@ module.exports = {
625611
extends: ["@commitlint/config-conventional"],
626612
parserPreset: {
627613
parserOpts: {
628-
headerPattern:
629-
/^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
614+
headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
630615
headerCorrespondence: ["type", "scope", "subject"],
631-
referenceActions: [
632-
"close",
633-
"closes",
634-
"closed",
635-
"fix",
636-
"fixes",
637-
"fixed",
638-
"resolve",
639-
"resolves",
640-
"resolved",
641-
],
616+
referenceActions: ["close", "closes", "closed", "fix", "fixes", "fixed", "resolve", "resolves", "resolved"],
642617
issuePrefixes: ["#"],
643618
noteKeywords: ["BREAKING CHANGE"],
644619
fieldPattern: /^-(.*?)-$/,

‎source/_posts/2024-10-17-PossCss.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
title: PostCSS
3+
author: 高红翔
4+
date: 2024-10-17 17:30:11
5+
categories: 工程化
6+
tags: npm
7+
---
8+
9+
`PostCSS` 是一个用于转换 CSS 的工具，它本质上是一个 JavaScript 插件系统，允许开发者通过编写或使用各种插件来对 CSS 进行处理和优化。它不像 Sass 或 LESS 那样是一个完整的 CSS 预处理器，而是通过一系列插件来实现不同的功能。这种插件化的架构使得 `PostCSS` 非常灵活和强大。
10+
11+
### 核心特点
12+
13+
1. **插件化架构**：
14+
15+
- `PostCSS` 的核心几乎不做任何事情，它依赖插件来处理 CSS。这些插件可以执行诸如自动添加浏览器前缀、优化代码、支持未来的 CSS 语法、编译嵌套样式、变量替换等各种任务。
16+
17+
例如，`autoprefixer` 插件用于自动添加浏览器前缀，`cssnano` 用于压缩 CSS。
18+
19+
2. **支持未来的 CSS 标准**：
20+
21+
- `PostCSS` 可以通过插件来支持还未在所有浏览器实现的未来 CSS 标准，如 CSS 变量、嵌套等。例如，`postcss-preset-env` 插件可以让开发者使用未来的 CSS 特性，类似于 Babel 让开发者使用最新的 JavaScript 特性。
22+
23+
3. **易于集成**：
24+
25+
- `PostCSS` 可以轻松集成到构建工具中，如 Webpack、Gulp、Grunt 等。大多数现代前端工具链和框架（如 Tailwind CSS 和 Next.js）都内置了对 `PostCSS` 的支持。
26+
27+
4. **性能优化**：
28+
- 由于 `PostCSS` 插件链是灵活且可以自定义的，你可以根据项目需求选择只加载所需的插件，这让它在性能和功能之间保持良好的平衡。某些插件如 `cssnano` 专注于优化 CSS 体积以提高加载速度。
29+
30+
### 工作原理
31+
32+
`PostCSS` 的工作流程分为三个主要步骤：
33+
34+
1. **解析**：`PostCSS` 将 CSS 源代码解析为一个抽象语法树（AST），这个过程使用了 `postcss-parser` 解析器。
35+
2. **处理**：通过加载插件，`PostCSS` 对这个 AST 进行遍历和修改，插件可以读取或修改 CSS 的规则、选择器、声明等。
36+
3. **生成**：修改完 AST 后，`PostCSS` 会将其转换回普通的 CSS 文件。
37+
38+
这三个步骤允许开发者灵活地定制 CSS 的处理流程。
39+
40+
### 常用插件
41+
42+
`PostCSS` 的强大之处在于它有大量的插件可供使用，以下是一些常用的插件：
43+
44+
1. **Autoprefixer**：
45+
46+
- 自动为 CSS 属性添加厂商前缀（如 `-webkit-`, `-moz-`），解决浏览器兼容性问题。
47+
48+
示例：
49+
50+
```css
51+
.example {
52+
display: flex;
53+
}
54+
```
55+
56+
会被处理为：
57+
58+
```css
59+
.example {
60+
display: -webkit-flex;
61+
display: -ms-flexbox;
62+
display: flex;
63+
}
64+
```
65+
66+
2. **cssnano**：
67+
68+
- 用于压缩 CSS 代码，减少文件体积，提高加载速度。
69+
70+
3. **postcss-preset-env**：
71+
72+
- 允许开发者使用未来的 CSS 特性，并将其转译为当前浏览器兼容的 CSS。
73+
- 例如，它支持 CSS 自定义属性、嵌套规则、自动计算 `calc()` 函数等。
74+
75+
4. **postcss-import**：
76+
77+
- 允许在 CSS 中使用 `@import` 语法导入其他文件，类似于 Sass 的 `@import` 功能，方便模块化开发。
78+
79+
5. **postcss-nested**：
80+
81+
- 允许在 CSS 中使用嵌套语法，类似于 Sass 的嵌套规则。
82+
83+
6. **tailwindcss**：
84+
85+
- 与 Tailwind CSS 集成，生成实用类（utility classes）的 CSS 框架。
86+
87+
7. **tailwindcss/nesting**
88+
89+
```css
90+
.button {
91+
@apply bg-blue-500 text-white;
92+
93+
&:hover {
94+
@apply bg-blue-700;
95+
}
96+
97+
.icon {
98+
@apply w-6 h-6;
99+
}
100+
}
101+
```
102+
103+
8. **postcss-flexbugs-fixes**：
104+
105+
- 修复 Flexbox 在不同浏览器中的兼容性问题。
106+
107+
9. **postcss-mixins**：
108+
109+
- 允许定义 CSS 混入（mixins），可以在多个地方重用相同的 CSS 代码块。
110+
111+
### 示例配置
112+
113+
#### 基本的 PostCSS 配置：
114+
115+
在 `postcss.config.js` 中配置 PostCSS 插件：
116+
117+
1. tailwindcss 项目
118+
119+
```js
120+
module.exports = {
121+
plugins: {
122+
"postcss-import": {},
123+
"tailwindcss/nesting": {},
124+
tailwindcss: {},
125+
autoprefixer: {},
126+
},
127+
}
128+
```
129+
130+
### 总结
131+
132+
`PostCSS` 是一个灵活且强大的 CSS 处理工具，依靠其插件系统，开发者可以实现从简单的样式转换到复杂的 CSS 预处理、优化等各种功能。由于它可以按需配置和加载插件，`PostCSS` 非常适合现代前端开发，尤其是需要高度定制化的项目。

‎source/_posts/2024-10-17-npm包详解.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: npm包详解
3+
author: 高红翔
4+
date: 2024-10-17 17:51:54
5+
categories: 工程化
6+
tags: npm
7+
---
8+
9+
## `simple-import-sort`
10+
11+
`simple-import-sort` 是一个用于自动排序 JavaScript 和 TypeScript 文件中的 `import` 语句的 ESLint 插件或工具，旨在提高代码的一致性、可读性和维护性。它通过按字母顺序和模块类型（如第三方库、相对路径等）排序导入内容，使代码风格更加统一，减少代码审查中的无效讨论。
12+
13+
### 作用和好处
14+
15+
1. **提高代码可读性**：当所有的 `import` 语句按照固定规则排列时，代码会显得更加整洁和一致，其他开发者在阅读代码时也能快速找到所需的依赖。
16+
2. **减少人为错误**：手动调整 `import` 顺序可能容易出错，尤其是在大型项目中。`simple-import-sort` 自动化这一过程，确保导入顺序始终符合预期。
17+
18+
3. **与 ESLint 集成**：通过与 ESLint 的集成，你可以在代码检查或提交时自动排序 `import` 语句，保证团队代码风格的一致性。
19+
20+
4. **按模块类别排序**：`simple-import-sort` 不仅按字母顺序排列，还可以智能地将第三方模块、本地模块、相对路径等分组，使导入顺序更加清晰。
21+
22+
### 使用步骤
23+
24+
#### 1. 安装
25+
26+
你可以通过 npm 或 yarn 安装 `simple-import-sort` 和 ESLint 插件：
27+
28+
```bash
29+
npm install --save-dev eslint-plugin-simple-import-sort
30+
```
31+
32+
或者：
33+
34+
```bash
35+
yarn add eslint-plugin-simple-import-sort --dev
36+
```
37+
38+
#### 2. 配置 ESLint
39+
40+
安装完成后，你需要在 ESLint 的配置文件中启用 `simple-import-sort` 插件。
41+
42+
在 `.eslintrc.js` 文件中进行如下配置：
43+
44+
```js
45+
module.exports = {
46+
plugins: ["simple-import-sort"],
47+
rules: {
48+
// 启用自动排序的规则
49+
"simple-import-sort/imports": "error",
50+
"simple-import-sort/exports": "error",
51+
},
52+
}
53+
```
54+
55+
- `simple-import-sort/imports`：自动对 `import` 语句进行排序。
56+
- `simple-import-sort/exports`：自动对 `export` 语句进行排序（可选）。
57+
58+
#### 3. 使用示例
59+
60+
假设你有如下未排序的 `import` 语句：
61+
62+
```js
63+
import React from "react"
64+
import { useState } from "react"
65+
import _ from "lodash"
66+
import { Button } from "./components/Button"
67+
import "./styles.css"
68+
import { Link } from "react-router-dom"
69+
```
70+
71+
启用 `simple-import-sort` 规则后，`import` 语句会自动按照规则重新排序，如下：
72+
73+
```js
74+
import React from "react"
75+
import { useState } from "react"
76+
77+
import _ from "lodash"
78+
import { Link } from "react-router-dom"
79+
80+
import { Button } from "./components/Button"
81+
82+
import "./styles.css"
83+
```
84+
85+
`simple-import-sort` 默认会按照以下规则进行分组和排序：
86+
87+
- 第三方库 `import`（如 `react`, `lodash`）
88+
- 相对路径或本地模块 `import`（如 `./components/Button`）
89+
- 样式或其他非 JS 资源的 `import`（如 `./styles.css`）
90+
91+
#### 4. 命令行排序（可选）
92+
93+
你也可以直接通过命令行使用 `simple-import-sort` 来对文件进行排序，而不依赖 ESLint：
94+
95+
```bash
96+
npx simple-import-sort ./src/**/*.js
97+
```
98+
99+
这将在命令行中对指定目录中的文件执行 `import` 排序。
100+
101+
### 高级用法
102+
103+
#### 分组排序
104+
105+
你可以在 `eslint` 配置中自定义分组规则。例如，按照库类型或路径深度进行分组：
106+
107+
```js
108+
module.exports = {
109+
plugins: ["simple-import-sort"],
110+
rules: {
111+
"simple-import-sort/imports": [
112+
"error",
113+
{
114+
groups: [
115+
// Node.js built-in modules
116+
["^node:"],
117+
// External libraries
118+
["^@?\\w"],
119+
// Internal modules
120+
["^(@|components)(/.*|$)"],
121+
// Parent imports (starting with ..)
122+
["^\\.\\.(?!/?$)", "^\\.\\./?$"],
123+
// Relative imports (starting with .)
124+
["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
125+
// Style imports
126+
["^.+\\.s?css$"],
127+
],
128+
},
129+
],
130+
},
131+
}
132+
```
133+
134+
- 这段配置将导入语句分为多个组：Node.js 内置模块、外部库、内部模块、父级目录、相对路径和样式文件。
135+
136+
#### 与 Prettier 集成
137+
138+
`simple-import-sort` 可以与 Prettier 一起使用，通过 Prettier 格式化代码时确保导入顺序正确：
139+
140+
1. 安装 Prettier 和 `eslint-config-prettier`：
141+
142+
```bash
143+
npm install --save-dev prettier eslint-config-prettier
144+
```
145+
146+
2. 配置 `.eslintrc.js` 文件禁用 ESLint 中可能与 Prettier 冲突的规则：
147+
148+
```js
149+
module.exports = {
150+
extends: ["eslint:recommended", "plugin:prettier/recommended"],
151+
plugins: ["simple-import-sort"],
152+
rules: {
153+
"simple-import-sort/imports": "error",
154+
"simple-import-sort/exports": "error",
155+
},
156+
}
157+
```
158+
159+
### 总结
160+
161+
`simple-import-sort` 是一个非常方便的工具，用于自动化排序和规范 `import` 和 `export` 语句。在团队合作中，它有助于保持代码的一致性，减少无谓的代码审查纠纷。通过 ESLint 集成，可以轻松在开发流程中强制执行这一规则，提升代码质量和维护性。

0 commit comments

Comments
 (0)