feat: add package.json cheatsheet.
This commit is contained in:
jaywcjlove
parent
5234cdc024
commit
7ab9ddf766
@ -17,6 +17,7 @@ Quick Reference
|
||||
## 工具包
|
||||
|
||||
[npm](./docs/npm.md)
|
||||
[package.json](./docs/package.json.md)
|
||||
[VSCode](./docs/vscode.md)
|
||||
[Sketch](./docs/sketch.md)
|
||||
[Jest](./docs/jest.md)
|
||||
|
||||
@ -84,7 +84,7 @@ Min Hour Day Mon Weekday
|
||||
|
||||
|
||||
### 特殊字符
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
| 特殊字符 | 说明 |
|
||||
|
||||
10
docs/git.md
10
docs/git.md
@ -27,7 +27,7 @@ $ git clone git_url 指定目录
|
||||
```
|
||||
|
||||
### 做出改变
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
在工作目录中**显示**修改后的文件，为您的下一次提交暂存
|
||||
@ -368,10 +368,10 @@ $ git log -p <file_name>
|
||||
```shell
|
||||
$ git log --pretty=oneline --graph --decorate --all
|
||||
```
|
||||
<!--rehype:className=wrap-->
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
### 分支
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
列出所有分支及其上游
|
||||
|
||||
@ -442,7 +442,7 @@ $ git rm -r --cached <目录/文件>
|
||||
```
|
||||
|
||||
### 修改远程 Commit 记录
|
||||
<!--rehype:warp-class=row-span-4-->
|
||||
<!--rehype:wrap-class=row-span-4-->
|
||||
|
||||
<!--rehype:-->
|
||||
```shell
|
||||
@ -519,7 +519,7 @@ $ git rev-parse --short HEAD # e10721c
|
||||
```shell
|
||||
$ git branch --merged master | grep -v '^\*\| master' | xargs -n 1 git branch -d
|
||||
```
|
||||
<!--rehype:className=wrap-->
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
### 中文乱码的解决方案
|
||||
|
||||
|
||||
@ -127,7 +127,7 @@ let age = 7;
|
||||
```
|
||||
|
||||
### 字符串
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -154,7 +154,7 @@ abc.split("");
|
||||
```
|
||||
|
||||
### 数字
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -211,7 +211,7 @@ Math.floor(Math.random() * 5) + 1;
|
||||
```
|
||||
|
||||
### 全局函数
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -247,7 +247,7 @@ JavaScript 条件
|
||||
|
||||
|
||||
### 操作符
|
||||
<!--rehype:warp-class=row-span-3-->
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -401,7 +401,7 @@ const rocketToMars = function() {
|
||||
```
|
||||
|
||||
### 箭头函数 (ES6)
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
#### 有两个参数
|
||||
@ -494,7 +494,7 @@ JavaScript 范围
|
||||
----
|
||||
|
||||
### 范围
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -793,7 +793,7 @@ for (let index in fruits) {
|
||||
```
|
||||
|
||||
### label 语句
|
||||
<!--rehype:warp-class= row-span-2-->
|
||||
<!--rehype:wrap-class= row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -827,7 +827,7 @@ for (let fruit of fruits) {
|
||||
```
|
||||
|
||||
### for await...of
|
||||
<!--rehype:warp-class= row-span-2-->
|
||||
<!--rehype:wrap-class= row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -972,7 +972,7 @@ console.log(classElection.place); // undefined
|
||||
```
|
||||
|
||||
### 可变的
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1041,7 +1041,7 @@ console.log(origObj.color);
|
||||
```
|
||||
|
||||
### 工厂函数
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1119,7 +1119,7 @@ JavaScript Classes
|
||||
----
|
||||
|
||||
### 静态方法/字段
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1311,7 +1311,7 @@ JavaScript Promises
|
||||
----
|
||||
|
||||
### Promise
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
创建 promises
|
||||
@ -1416,7 +1416,7 @@ promise.catch((err) => {
|
||||
```
|
||||
|
||||
### Promise.all()
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1457,7 +1457,7 @@ promise.then(res => {
|
||||
```
|
||||
|
||||
### 避免嵌套的 Promise 和 .then()
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1484,7 +1484,7 @@ JavaScript Async-Await
|
||||
<!--rehype:body-class=cols-2-->
|
||||
|
||||
### 异步
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1611,7 +1611,7 @@ req.send();
|
||||
```
|
||||
|
||||
### POST
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1634,7 +1634,7 @@ xhr.onerror = () => {
|
||||
```
|
||||
|
||||
### fetch api
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -1695,7 +1695,7 @@ fetch('https://api-xxx.com/endpoint', {
|
||||
```
|
||||
|
||||
### async await 语法
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
|
||||
16
docs/jest.md
16
docs/jest.md
@ -17,7 +17,7 @@ Jest 是一款优雅、简洁的 JavaScript 测试框架。
|
||||
- 代码覆盖， 无需其他操作，您仅需添加 --coverage 参数来生成代码覆盖率报告。
|
||||
|
||||
### 测试结构
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -150,7 +150,7 @@ expect([{ a: 1 }, { b: 2 }]).toEqual([
|
||||
```
|
||||
|
||||
### 模拟函数
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -293,7 +293,7 @@ expect(fn).toThrowErrorMatchingSnapshot()
|
||||
----
|
||||
|
||||
### 实例
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。
|
||||
@ -330,7 +330,7 @@ test('async test', async () => {
|
||||
```
|
||||
|
||||
### done() 回调
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -371,7 +371,7 @@ test('async test', () => {
|
||||
## 模拟
|
||||
|
||||
### 模拟函数
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```js
|
||||
@ -409,7 +409,7 @@ const callback = jest.fn(() => true)
|
||||
[模拟函数文档](https://jestjs.io/docs/en/mock-function-api)
|
||||
|
||||
### 返回、解析和拒绝值
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
您的模拟可以返回值：
|
||||
|
||||
@ -504,7 +504,7 @@ const setTitle = jest
|
||||
```
|
||||
|
||||
### 定时器模拟
|
||||
<!--rehype:warp-class=row-span-3-->
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
<!--rehype:-->
|
||||
为使用本机计时器函数（`setTimeout`、`setInterval`、`clearTimeout`、`clearInterval`）的代码编写同步测试。
|
||||
@ -556,7 +556,7 @@ Object.defineProperty(location, 'title', {
|
||||
```
|
||||
|
||||
### 清除和恢复模拟
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
对于一个模拟
|
||||
|
||||
@ -47,7 +47,7 @@ JSON 备忘清单
|
||||
<!--rehype:class=table-thead-hide-->
|
||||
|
||||
### 字符串
|
||||
<!--rehype:data-warp-style=grid-row: span 3/span 3;-->
|
||||
<!--rehype:data-wrap-style=grid-row: span 3/span 3;-->
|
||||
|
||||
<!--rehype:-->
|
||||
| | |
|
||||
@ -82,7 +82,7 @@ Have to be delimited by double quotes
|
||||
|
||||
|
||||
### 数字
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
| Type | Description |
|
||||
@ -229,7 +229,7 @@ let myObject = {
|
||||
<!--rehype:class=table-thead-hide-->
|
||||
|
||||
### 访问嵌套
|
||||
<!--rehype:data-warp-style=grid-row: span 2/span 2;-->
|
||||
<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
@ -273,7 +273,7 @@ let myObject = {
|
||||
<!--rehype:class=table-thead-hide-->
|
||||
|
||||
### 访问对象数组
|
||||
<!--rehype:data-warp-style=grid-row: span 2/span 2;-->
|
||||
<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
|
||||
|
||||
<!--rehype:-->
|
||||
```javascript
|
||||
|
||||
@ -42,7 +42,7 @@ Header 2
|
||||
```
|
||||
|
||||
### 无序列表
|
||||
<!--rehype:data-warp-style=grid-row: span 2/span 2;-->
|
||||
<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
|
||||
|
||||
<!--rehype:-->
|
||||
```markdown
|
||||
@ -166,7 +166,7 @@ console.log("This is a block code")
|
||||
```
|
||||
|
||||
### 表格
|
||||
<!--rehype:data-warp-style=grid-column: span 2/span 2;-->
|
||||
<!--rehype:data-wrap-style=grid-column: span 2/span 2;-->
|
||||
|
||||
<!--rehype:-->
|
||||
```markdown
|
||||
@ -188,7 +188,7 @@ console.log("This is a block code")
|
||||
Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
|
||||
|
||||
### 图片
|
||||
<!--rehype:data-warp-style=grid-column: span 2/span 2;-->
|
||||
<!--rehype:data-wrap-style=grid-column: span 2/span 2;-->
|
||||
|
||||
<!--rehype:-->
|
||||
```markdown
|
||||
|
||||
@ -56,7 +56,7 @@ npm 备忘清单
|
||||
|
||||
|
||||
### 杂项功能
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
将某人添加为所有者
|
||||
|
||||
|
||||
597
docs/package.json.md
Normal file
597
docs/package.json.md
Normal file
@ -0,0 +1,597 @@
|
||||
package.json 备忘清单
|
||||
===
|
||||
|
||||
这个快速参考备忘清单，显示了关于 package.json 文件中所需内容的全部内容。
|
||||
|
||||
重要字段
|
||||
----
|
||||
|
||||
### 介绍
|
||||
|
||||
本快速参考备忘清单是您需要了解的关于 package.json 文件中所需内容的全部内容。 它必须是实际的 JSON，而不仅仅是 JavaScript 对象字面量。
|
||||
|
||||
- [npm 文档](https://docs.npmjs.com/files/package.json) _(npmjs.com)_
|
||||
- [yarnpkg 文档](https://classic.yarnpkg.com/en/docs/package-json) _(yarnpkg.com)_
|
||||
|
||||
### `name`
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-awesome-package"
|
||||
}
|
||||
```
|
||||
|
||||
**规则**
|
||||
|
||||
- 必须小于或等于214个字符(包括 `@scope/` 范围包)
|
||||
- 不能以点（`.`）或下划线（`_`）开头
|
||||
- 名称中不得包含大写字母
|
||||
- 必须仅使用URL安全字符
|
||||
|
||||
### `version`
|
||||
|
||||
```json
|
||||
{
|
||||
"version": "1.0.0"
|
||||
}
|
||||
```
|
||||
|
||||
包的当前版本，严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
### Tips
|
||||
|
||||
- 不要使用和 `Node.js` 核心模块相同的名字。
|
||||
- 不要在名字里包含 `js` 或者 `node` 单词。
|
||||
- 短小精悍，让人看到名字就大概了解包的功能，记住它也会被用在 `require()` 调用里。
|
||||
- 保证名字在 [npm registry](https://www.npmjs.com/) 里是唯一的。
|
||||
- name 和 version 字段一起用于创建唯一ID
|
||||
|
||||
如果没有 `name` 和`version` 字段，您的包将无法安装
|
||||
|
||||
### 安装 `name` 包
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```sh
|
||||
yarn add [包名]
|
||||
# or
|
||||
npm install [包名]
|
||||
```
|
||||
|
||||
安装后存放位置
|
||||
|
||||
```
|
||||
node_modules/[包名]
|
||||
```
|
||||
|
||||
npmjs 下载地址
|
||||
|
||||
```
|
||||
https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
|
||||
```
|
||||
<!--rehype:className=wrap-text-->
|
||||
|
||||
这是您的 `包` 的名称。 它在URL中使用，作为参数命令行，以及 `node_modules` 中的目录名。
|
||||
|
||||
信息类字段
|
||||
----
|
||||
|
||||
### `description`
|
||||
|
||||
```json
|
||||
{
|
||||
"description": "我的包的概要简短描述"
|
||||
}
|
||||
```
|
||||
|
||||
帮助使用者了解包的功能的字符串，包管理器也会把这个字符串作为搜索关键词。
|
||||
|
||||
### `license`
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
所有包都应该指定许可证，以便让用户了解他们是在什么授权下使用此包，以及此包还有哪些附加限制。
|
||||
|
||||
```json
|
||||
{
|
||||
"license": "MIT",
|
||||
"license": "(MIT or GPL-3.0)",
|
||||
"license": "SEE LICENSE IN LICENSE_FILENAME.txt",
|
||||
"license": "UNLICENSED"
|
||||
}
|
||||
```
|
||||
|
||||
鼓励使用开源 [(OSI-approved)](https://opensource.org/licenses/alphabetical) 许可证，除非你有特别的原因不用它。 如果你开发的包是你工作的一部分，最好和公司讨论后再做决定。
|
||||
|
||||
**license字段必须是以下之一:**
|
||||
|
||||
- 如果你使用标准的许可证，需要一个有效地 [SPDX 许可证标识](https://spdx.org/licenses/)。
|
||||
- 如果你用多种标准许可证，需要有效的 [SPDX 许可证表达式2.0语法表达式](https://www.npmjs.com/package/spdx)。
|
||||
- 如果你使用非标准的许可证，一个 `SEE LICENSE IN <文件名>` 字符串指向你的包里顶级目录的一个 <文件名>。
|
||||
- 如果你不想在任何条款下授权其他人使用你的私有或未公开的包，一个 `UNLICENSED` 字符串。
|
||||
|
||||
### `keywords`
|
||||
|
||||
```json
|
||||
{
|
||||
"keywords": [
|
||||
"short", "relevant", "keywords"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
一个字符串数组，当在包管理器里搜索包时很有用。
|
||||
|
||||
链接类字段
|
||||
----
|
||||
|
||||
各种指向项目文档、issues 上报，以及代码托管网站的链接字段。
|
||||
|
||||
### `homepage`
|
||||
|
||||
```json
|
||||
{
|
||||
"homepage": "https://your-package.org"
|
||||
}
|
||||
```
|
||||
|
||||
是包的项目主页或者文档首页。
|
||||
|
||||
### `repository`
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```json
|
||||
{
|
||||
"repository": {
|
||||
"type": "git", "url": "https://github.com/user/repo.git"
|
||||
},
|
||||
"repository": "github:user/repo",
|
||||
"repository": "gitlab:user/repo",
|
||||
"repository": "bitbucket:user/repo",
|
||||
"repository": "gist:a1b2c3d4e5f"
|
||||
}
|
||||
```
|
||||
|
||||
包的实际代码所在的位置。
|
||||
|
||||
### `bugs`
|
||||
|
||||
```json
|
||||
{
|
||||
"bugs": "https://github.com/user/repo/issues"
|
||||
}
|
||||
```
|
||||
|
||||
问题反馈系统的 URL，或者是 email 地址之类的链接。用户通过该途径向你反馈问题。
|
||||
|
||||
项目维护类字段
|
||||
----
|
||||
|
||||
### `author`
|
||||
|
||||
项目的维护者。
|
||||
|
||||
```json
|
||||
{
|
||||
"author": {
|
||||
"name": "Your Name",
|
||||
"email": "you@xxx.com",
|
||||
"url": "http://your-x.com"
|
||||
},
|
||||
"author": "Your Name <you@xxx.com> (http://your-x.com)"
|
||||
}
|
||||
```
|
||||
|
||||
作者信息，一个人。
|
||||
|
||||
### `contributors`
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```json
|
||||
{
|
||||
"contributors": [
|
||||
{ "name": "Your Friend", "email": "friend@xxx.com", "url": "http://friends-xx.com" }
|
||||
{ "name": "Other Friend", "email": "other@xxx.com", "url": "http://other-xx.com" }
|
||||
],
|
||||
"contributors": [
|
||||
"Your Friend <friend@xxx.com> (http://friends-xx.com)",
|
||||
"Other Friend <other@xxx.com> (http://other-xx.com)"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
贡献者信息，可能很多人。
|
||||
|
||||
## 文件类信息
|
||||
|
||||
指定包含在项目中的文件，以及项目的入口文件。
|
||||
|
||||
### `files`
|
||||
|
||||
```json
|
||||
{
|
||||
"files": [
|
||||
"filename.js",
|
||||
"directory/",
|
||||
"glob/*.{js,json}"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
项目包含的文件，可以是单独的文件、整个文件夹，或者通配符匹配到的文件。
|
||||
|
||||
### `main`
|
||||
|
||||
```json
|
||||
{
|
||||
"main": "filename.js"
|
||||
}
|
||||
```
|
||||
|
||||
项目的入口文件。
|
||||
|
||||
### `man`
|
||||
|
||||
```json
|
||||
{
|
||||
"man": "./man/doc.1",
|
||||
"man": ["./man/doc.1", "./man/doc.2"]
|
||||
}
|
||||
```
|
||||
|
||||
项目的入口文件。
|
||||
|
||||
### `directories`
|
||||
|
||||
```json
|
||||
{
|
||||
"directories": {
|
||||
"lib": "path/to/lib/",
|
||||
"bin": "path/to/bin/",
|
||||
"man": "path/to/man/",
|
||||
"doc": "path/to/doc/",
|
||||
"example": "path/to/example/"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当你的包安装时，你可以指定确切的位置来放二进制文件、man pages、文档、例子等。
|
||||
|
||||
### `bin`
|
||||
|
||||
```json
|
||||
{
|
||||
"bin": "bin.js",
|
||||
"bin": {
|
||||
"命令名称": "bin/命令路径/命令名称.js",
|
||||
"other-command": "bin/other-command"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
随着项目一起被安装的可执行文件。
|
||||
|
||||
### `types`
|
||||
|
||||
这是一个只在 [TypeScript](https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html) 中生效的字段，如果您的包有一个 `main.js` 文件，您还需要在 `package.json` 文件中指明主声明文件。 将 `types` 属性设置为指向 `bundled` 的声明文件。 例如：
|
||||
|
||||
```json
|
||||
{
|
||||
"types": "./lib/main.d.ts",
|
||||
}
|
||||
```
|
||||
|
||||
如果您的主声明文件名为 `index.d.ts` 并且位于包的根目录（`index.js`旁边），则不需要标记 `types` 属性，建议这样做。
|
||||
|
||||
## 打包包字段
|
||||
|
||||
### `esnext`
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
完整的[提案在这里](http://2ality.com/2017/04/transpiling-dependencies-babel.html)。 简短说明：
|
||||
|
||||
- `esnext`：ES模块中使用阶段4功能（或更旧版本）的源代码，未编译。
|
||||
- `main`：指向一个CommonJS模块（或UMD模块），其 `JavaScript` 与 `Node.js` 当前可以处理的一样现代。
|
||||
- 大多数 `module` 用例应该可以通过 `esnext` 处理。
|
||||
- `browser` 可以通过 `esnext` 的扩展版本来处理
|
||||
|
||||
```json
|
||||
{
|
||||
"main": "main.js",
|
||||
"esnext": {
|
||||
"main": "main-esnext.js",
|
||||
"browser": "browser-specific-main-esnext.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
另请参阅：[通过 npm 交付未编译的源代码](http://2ality.com/2017/06/pkg-esnext.html)
|
||||
|
||||
### `module`
|
||||
|
||||
`pkg.module` 将指向具有 `ES2015` 模块语法的模块，但仅指向目标环境支持的语法功能。 完整的描述[在这里](https://github.com/rollup/rollup/wiki/pkg.module)。
|
||||
|
||||
```json
|
||||
{
|
||||
"module": "dist/my-package.esm.js"
|
||||
}
|
||||
```
|
||||
|
||||
支持：[rollup](https://github.com/rollup/rollup-plugin-node-resolve), [webpack](https://webpack.js.org/configuration/resolve/#resolve-mainfields)
|
||||
|
||||
### `browser`
|
||||
|
||||
```json
|
||||
"browser": {
|
||||
"module-a": "./shims/module-a.js",
|
||||
"./server/only.js": "./shims/client-only.js"
|
||||
}
|
||||
```
|
||||
|
||||
字段由模块作者提供，作为 `JavaScript` 包或组件工具的提示，用于打包模块以供客户端使用。 提案就[在这里](https://github.com/defunctzombie/package-browser-field-spec)。
|
||||
|
||||
## 任务类字段
|
||||
|
||||
包里还可以包含一些可执行脚本或者其他配置信息。
|
||||
|
||||
### `scripts`
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build-project": "node build-project.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
脚本是定义自动化开发相关任务的好方法，比如使用一些简单的构建过程或开发工具。 在 `scripts` 字段里定义的脚本，可以通过 `yarn run <script>` 命令来执行。 例如，上述 `build-project` 脚本可以通过 `yarn run build-project` 调用，并执行 `node build-project.js`。
|
||||
|
||||
有一些特殊的脚本名称。 如果定义了 `preinstall` 脚本，它会在包安装前被调用。 出于兼容性考虑，`install`、`postinstall` 和 `prepublish` 脚本会在包完成安装后被调用。
|
||||
|
||||
`start` 脚本的默认值为 `node server.js`。
|
||||
|
||||
参考文档：[npm docs](https://docs.npmjs.com/files/package.json#default-values)
|
||||
|
||||
### 特定的 `scripts`
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
对于以下脚本，`npm` 支持 `package.json` 文件的 `scripts` 默认命令字段：
|
||||
|
||||
- `prepublish`: 在打包并发布包之前运行，以及在没有任何参数的本地 `npm` 安装之前运行。 （见下文）
|
||||
- `prepare`: 在打包和发布包之前运行，在没有任何参数的本地 `npm install` 上运行，以及安装 git 依赖项时（见下文）。 这是在 `preublish` 之后运行，但是在 `preublishOnly` 之前运行。
|
||||
- `prepublishOnly`: 在包准备和打包之前运行，仅限于npm发布。 （见下文。）
|
||||
- `prepack`: 在打包 `tarball` 之前运行（在 `npm pack`，`npm publish`，以及安装 git 依赖项时）
|
||||
- `postpack`: 在生成 `tarball` 之后运行并移动到其最终目标。
|
||||
- `publish`, `postpublish`: 在包发布后运行。
|
||||
- `preinstall`: 在安装软件包之前运行。
|
||||
- `install`, `postinstall`: 安装包后运行。
|
||||
- `preuninstall`, `uninstall`: 在卸载软件包之前运行。
|
||||
- `postuninstall`: 在卸载软件包之后运行。
|
||||
- `preversion`: 在改变包版本之前运行。
|
||||
- `version`: 改变包版本后运行，但提交之前。
|
||||
- `postversion`: 改变包版本后运行，然后提交。
|
||||
- `pretest`, `test`, `posttest`: 由 `npm test` 命令运行。
|
||||
- `prestop`, `stop`, `poststop`: 由 `npm stop` 命令运行。
|
||||
- `prestart`, `start`, `poststart`: 由 `npm start` 命令运行。
|
||||
- `prerestart`, `restart`, `postrestart`: 由 `npm restart` 命令运行。 注意：如果没有提供重启脚本，`npm restart` 将运行 `stop` 和`start` 脚本。
|
||||
- `preshrinkwrap`, `shrinkwrap`, `postshrinkwrap`: 由 `npm shrinkwrap` 命令运行。
|
||||
|
||||
参考文档：[npm docs](https://docs.npmjs.com/misc/scripts).
|
||||
|
||||
### `config`
|
||||
|
||||
```json
|
||||
{
|
||||
"config": {
|
||||
"port": "8080"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
配置你的脚本的选项或参数。
|
||||
|
||||
## 依赖描述类字段
|
||||
|
||||
你的包很可能依赖其他包。你可以在你的 `package.json` 文件里指定那些依赖。
|
||||
|
||||
### `dependencies`
|
||||
|
||||
这些是你的包的开发版和发布版都需要的依赖。
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"package-1": "^3.1.4",
|
||||
"package-2": "file:./path/to/dir"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> 你可以指定一个确切的版本、一个最小的版本 (比如 `>=`) 或者一个版本范围 (比如 `>= ... <`)。
|
||||
> 包也可以指向本地的一个目录文件夹。
|
||||
|
||||
### `devDependencies`
|
||||
|
||||
这些是只在你的包开发期间需要，但是生产环境不会被安装的包。
|
||||
|
||||
```json
|
||||
{
|
||||
"devDependencies": {
|
||||
"package-2": "^0.4.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `peerDependencies`
|
||||
|
||||
平行依赖允许你说明你的包和其他包版本的兼容性。
|
||||
|
||||
```json
|
||||
{
|
||||
"peerDependencies": {
|
||||
"package-3": "^2.7.18"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `peerDependenciesMeta`
|
||||
|
||||
```json
|
||||
{
|
||||
"peerDependenciesMeta": {
|
||||
"node-sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"fibers": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
添加可选设置以消除丢失的对等依赖性警告，[#6671](https://github.com/yarnpkg/yarn/pull/6671) 。
|
||||
|
||||
### `optionalDependencies`
|
||||
|
||||
```json
|
||||
{
|
||||
"optionalDependencies": {
|
||||
"package-5": "^1.6.1"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可选依赖可以用于你的包，但不是必需的。如果可选包没有找到，安装还可以继续。
|
||||
|
||||
### `bundledDependencies`
|
||||
|
||||
```json
|
||||
{
|
||||
"bundledDependencies": [
|
||||
"package-4"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
打包依赖是发布你的包时将会一起打包的一个包名数组。
|
||||
|
||||
## 系统
|
||||
|
||||
你可以提供和你的包关联的系统级的信息，比如操作系统兼容性之类。
|
||||
|
||||
### `engines`
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
指定使用你的包客户必须使用的版本，这将检查 `process.versions` 以及当前 `yarn` 版本。
|
||||
|
||||
```json
|
||||
{
|
||||
"engines": {
|
||||
"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0",
|
||||
"node": ">=4.4.7 <7.0.0",
|
||||
"zlib": "^1.2.8",
|
||||
"yarn": "^0.14.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
此检查遵守正常的 [semver](http://semver.org/lang/zh-CN/) 规则，但有一个例外。 它允许预发布版本匹配未明确指定预发布的 [semver](http://semver.org/lang/zh-CN/)。 例如，`1.4.0-rc.0` 匹配 `>=1.3.0`，但它与典型的 `semver` 检查不匹配。
|
||||
|
||||
### `os`
|
||||
|
||||
```json
|
||||
{
|
||||
"os": ["darwin", "linux"],
|
||||
"os": ["!win32"]
|
||||
}
|
||||
```
|
||||
|
||||
此选项指定你的包的操作系统兼容性，它会检查 `process.platform`。
|
||||
|
||||
|
||||
### `cpu`
|
||||
|
||||
```json
|
||||
{
|
||||
"cpu": ["x64", "ia32"],
|
||||
"cpu": ["!arm", "!mips"]
|
||||
}
|
||||
```
|
||||
|
||||
使用这个选项指定你的包将只能在某些 CPU 体系架构上运行，这会检查 `process.arch`。
|
||||
|
||||
## 发布
|
||||
|
||||
### `private`
|
||||
|
||||
```json
|
||||
{
|
||||
"private": true
|
||||
}
|
||||
```
|
||||
|
||||
如果你不想你的包发布到包管理器(npm 或者 私有包管理)，设置为 `true`。
|
||||
|
||||
### `publishConfig`
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
这些配置值将在你的包发布时使用。比如，你可以给包打标签。
|
||||
|
||||
```json
|
||||
{
|
||||
"publishConfig": {
|
||||
"registry": "https://registry.npm.taobao.org"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这是一组将在发布时使用的配置值。 如果要设置标记，注册表或访问权限，则特别方便，以便确保给定的包未标记为 `latest`，发布到全局公共 `registry` 或默认情况下，作用域模块(@scoped)是私有的。
|
||||
|
||||
可以覆盖任何配置值，但只有 `tag`，`registry` 和 `access` 可能对于发布而言很重要，[npm-config](https://docs.npmjs.com/misc/config#config-settings)。
|
||||
|
||||
## Yarn
|
||||
|
||||
### `flat`
|
||||
|
||||
如果你的包只允许给定依赖的一个版本，你想强制和命令行上 [yarn install --flat](#) 相同的行为，把这个值设为 `true`。
|
||||
|
||||
```json
|
||||
{
|
||||
"flat": true
|
||||
}
|
||||
```
|
||||
|
||||
请注意，如果你的 `package.json` 包含 `"flat": true` 并且其它包依赖你的包 (比如你在构建一个库，而不是应用)， 其它那些包也需要在它们的 `package.json` 加上 `"flat": true`，或者在命令行上用 `yarn install --flat` 安装。
|
||||
|
||||
### `resolutions`
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```json
|
||||
{
|
||||
"resolutions": {
|
||||
"transitive-package-1": "0.0.29",
|
||||
"transitive-package-2": "file:./local-forks/transitive-package-2",
|
||||
"dependencies-package-1/transitive-package-3": "^2.1.1"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
允许您覆盖特定嵌套依赖项的版本。 有关完整规范，请参见[选择性版本解析 RFC](https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md)。
|
||||
|
||||
注意，`yarn install --flat` 命令将会自动在 `package.json` 文件里加入 `resolutions` 字段。
|
||||
|
||||
|
||||
另见
|
||||
----
|
||||
|
||||
- [PACKAGE.JSON 中文说明](https://jaywcjlove.github.io/package.json) _(github.io)_
|
||||
@ -24,7 +24,7 @@ Sketch 备忘清单
|
||||
|
||||
|
||||
### 类型
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
| 快捷键 | 类型 |
|
||||
@ -46,7 +46,7 @@ Sketch 备忘清单
|
||||
|
||||
### 画布视图
|
||||
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
| 画布视图 | 快捷键 |
|
||||
|
||||
@ -100,7 +100,7 @@ array3 = [8001, 8001, 8002]
|
||||
```
|
||||
|
||||
### 友好数组
|
||||
<!--rehype:data-warp-style=grid-column: span 2/span 2;-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```toml
|
||||
@ -171,7 +171,7 @@ bar = 2
|
||||
```
|
||||
|
||||
### 类数组
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```toml
|
||||
@ -249,7 +249,7 @@ bat = "hi"
|
||||
```
|
||||
|
||||
### Inline Table
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```toml
|
||||
|
||||
@ -66,7 +66,7 @@ Object, String, Number, Boolean
|
||||
```
|
||||
|
||||
### 通用语法
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
@ -93,7 +93,7 @@ interface JSONResponse extends Response, HTTPAble {
|
||||
```
|
||||
|
||||
### 泛型
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
声明一个可以在你的 Interface 中改变的类型
|
||||
|
||||
@ -182,7 +182,7 @@ Type
|
||||
----
|
||||
|
||||
### Type vs Interface
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
- Interface 只能描述对象形状
|
||||
- Interface 可以通过多次声明来扩展
|
||||
@ -261,7 +261,7 @@ const data: import("./data").data
|
||||
这些功能非常适合构建库、描述现有的 JavaScript 代码，您可能会发现在大多数 TypeScript 应用程序中很少使用它们。
|
||||
|
||||
### 对象字面量语法
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
@ -300,7 +300,7 @@ type ArtistSub = Subscriber<Artist>
|
||||
类似于类型系统的映射语句，允许输入类型更改新类型的结构。
|
||||
|
||||
### 模板联合类型
|
||||
<!--rehype:warp-class=col-span-3-->
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
@ -314,7 +314,7 @@ type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`;
|
||||
```
|
||||
|
||||
### 条件类型
|
||||
<!--rehype:warp-class=col-span-3-->
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
@ -330,7 +330,7 @@ type FourLegs = HasFourLegs<Animals>
|
||||
----
|
||||
|
||||
### If 声明
|
||||
<!--rehype:warp-class=row-span-3-->
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
#### typeof（用于原语）
|
||||
|
||||
@ -377,7 +377,7 @@ if (Array.isArray(input)) {
|
||||
```
|
||||
|
||||
### 任务
|
||||
<!--rehype:warp-class=row-span-3-->
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
@ -556,7 +556,7 @@ class C implements Bag {}
|
||||
```
|
||||
|
||||
### 通用语法
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
@ -643,7 +643,7 @@ class Dog extends Animal { getName(): { ... } }
|
||||
一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。
|
||||
|
||||
### 装饰器和属性
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
@ -1143,7 +1143,7 @@ declare namespace JSX {
|
||||
```
|
||||
|
||||
### 函数组件
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```tsx
|
||||
@ -1187,7 +1187,7 @@ function Dog(prop:CeProps): JSX.Element {
|
||||
```
|
||||
|
||||
### 函数子组件
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```tsx
|
||||
@ -1211,7 +1211,7 @@ Menu.SubMenu = SubMenu;
|
||||
```
|
||||
|
||||
### 有效组件
|
||||
<!--rehype:warp-class=row-span-2-->
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```tsx
|
||||
@ -1245,7 +1245,7 @@ function NotAValidFactoryFunction() {
|
||||
|
||||
|
||||
### 类组件
|
||||
<!--rehype:warp-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
<!--rehype:-->
|
||||
```ts
|
||||
|
||||
@ -19,7 +19,7 @@ VSCode 备忘清单
|
||||
|
||||
|
||||
### 基本编辑
|
||||
<!--rehype:data-warp-style=grid-row: span 2/span 2;-->
|
||||
<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
|
||||
|
||||
| - | - |
|
||||
|---------------------------|------------------------------------|
|
||||
|
||||
@ -58,19 +58,19 @@ export function getTocsTree(arr = [], result = []) {
|
||||
|
||||
if (toc.number === level && titleNum === level) {
|
||||
const header = getHeader(data.slice(n), level);
|
||||
const warpCls = ['warp'];
|
||||
const headerCls = ['warp-header', `h${level}warp`];
|
||||
const wrapCls = ['wrap'];
|
||||
const headerCls = ['wrap-header', `h${level}wrap`];
|
||||
|
||||
if (level === 1) warpCls.push('max-container');
|
||||
const warpStyle = toc.properties['data-warp-style'];
|
||||
delete toc.properties['data-warp-style']
|
||||
const warpClass = toc.properties['warp-class'];
|
||||
if (warpClass) warpCls.push(warpClass);
|
||||
delete toc.properties['warp-class'];
|
||||
if (level === 1) wrapCls.push('max-container');
|
||||
const wrapStyle = toc.properties['data-wrap-style'];
|
||||
delete toc.properties['data-wrap-style']
|
||||
const wrapClass = toc.properties['wrap-class'];
|
||||
if (wrapClass) wrapCls.push(wrapClass);
|
||||
delete toc.properties['wrap-class'];
|
||||
const panle = {
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: { class: warpCls, style: warpStyle },
|
||||
properties: { class: wrapCls, style: wrapStyle },
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
@ -81,7 +81,7 @@ export function getTocsTree(arr = [], result = []) {
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: { class: 'warp-body' },
|
||||
properties: { class: 'wrap-body' },
|
||||
children: [
|
||||
...header
|
||||
],
|
||||
@ -101,7 +101,7 @@ export function getTocsTree(arr = [], result = []) {
|
||||
panle.children = panle.children.concat({
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: { class: [`h${level}warp-body`, bodyClass], style: bodyStyle },
|
||||
properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
|
||||
children: [...resultChilds]
|
||||
});
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ export function footer() {
|
||||
type: 'element',
|
||||
tagName: 'footer',
|
||||
properties: {
|
||||
class: 'footer-warp',
|
||||
class: 'footer-wrap',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
||||
@ -45,18 +45,18 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
body.home .h1warp-body, body.home .h1warp .warp-body {
|
||||
body.home .h1wrap-body, body.home .h1wrap .wrap-body {
|
||||
max-width: 940px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
body.home .h2warp > h2 {
|
||||
body.home .h2wrap > h2 {
|
||||
display: inline-block;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
body.home .h2warp > h2::after {
|
||||
body.home .h2wrap > h2::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 3px;
|
||||
@ -65,15 +65,15 @@ body.home .h2warp > h2::after {
|
||||
--bg-opacity: 1;
|
||||
background-color: rgb(30 41 59/var(--bg-opacity));
|
||||
}
|
||||
body.home .h1warp .warp-body p + p {
|
||||
body.home .h1wrap .wrap-body p + p {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
body.home .h1warp .warp-body p {
|
||||
body.home .h1wrap .wrap-body p {
|
||||
text-indent: 2rem;
|
||||
}
|
||||
|
||||
|
||||
body.home .h1warp p {
|
||||
body.home .h1wrap p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -150,29 +150,29 @@ body.home .h1warp p {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.warp-header.h1warp {
|
||||
.wrap-header.h1wrap {
|
||||
text-align: center;
|
||||
margin-top: 4.6rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.warp-header.h1warp .warp-body {
|
||||
.wrap-header.h1wrap .wrap-body {
|
||||
color: rgb(71 85 105/1);
|
||||
}
|
||||
|
||||
.warp-header.h1warp > h1 {
|
||||
.wrap-header.h1wrap > h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.h1warp-body {
|
||||
.h1wrap-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.warp-header.h2warp > h2 {
|
||||
.wrap-header.h2wrap > h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 24px;
|
||||
@ -184,7 +184,14 @@ body.home .h1warp p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.warp-header.h3warp {
|
||||
.wrap-header.h2wrap > :last-child {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.wrap-header.h2wrap .wrap-body {
|
||||
color: rgb(148 163 184/1);
|
||||
}
|
||||
|
||||
.wrap-header.h3wrap {
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@ -192,7 +199,7 @@ body.home .h1warp p {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.warp-header.h3warp > h3 {
|
||||
.wrap-header.h3wrap > h3 {
|
||||
color: rgb(226 232 240/1);
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
@ -209,7 +216,7 @@ body.home .h1warp p {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.warp-header.h3warp > .warp-body p, .warp-header.h4warp > .warp-body p {
|
||||
.wrap-header.h3wrap > .wrap-body p, .wrap-header.h4wrap > .wrap-body p {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
padding-left: 1rem;
|
||||
@ -220,7 +227,7 @@ body.home .h1warp p {
|
||||
background-color: rgb(15 23 42/0.3);
|
||||
}
|
||||
|
||||
.warp-header.h3warp > .warp-body p:first-child:before {
|
||||
.wrap-header.h3wrap > .wrap-body p:first-child:before {
|
||||
background-color: rgb(15 23 42/0.3);
|
||||
color: rgb(30 41 59/0);
|
||||
content: '-';
|
||||
@ -231,11 +238,11 @@ body.home .h1warp p {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.warp-header.h3warp > .warp-body p:last-child {
|
||||
.wrap-header.h3wrap > .wrap-body p:last-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.warp-header.h3warp > .warp-body {
|
||||
.wrap-header.h3wrap > .wrap-body {
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@ -243,7 +250,7 @@ body.home .h1warp p {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.h4warp > h4 {
|
||||
.h4wrap > h4 {
|
||||
border-color: rgb(51 65 85/0.5);
|
||||
background-color: rgb(51 65 85/0.3);
|
||||
color: rgb(203 213 225/1);
|
||||
@ -263,13 +270,13 @@ ol, ul, menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.h4warp > .warp-body ul,
|
||||
.h4warp > .warp-body ol,
|
||||
.h4warp > .warp-body dl,
|
||||
.h4wrap > .wrap-body ul,
|
||||
.h4wrap > .wrap-body ol,
|
||||
.h4wrap > .wrap-body dl,
|
||||
|
||||
.h3warp > .warp-body ul,
|
||||
.h3warp > .warp-body ol,
|
||||
.h3warp > .warp-body dl {
|
||||
.h3wrap > .wrap-body ul,
|
||||
.h3wrap > .wrap-body ol,
|
||||
.h3wrap > .wrap-body dl {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: grid;
|
||||
@ -277,16 +284,16 @@ ol, ul, menu {
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.h2warp-body ul li,
|
||||
.h2warp-body ol li,
|
||||
.h2warp-body dl li {
|
||||
.h2wrap-body ul li,
|
||||
.h2wrap-body ol li,
|
||||
.h2wrap-body dl li {
|
||||
padding: 9px;
|
||||
padding-left: 26px;
|
||||
position: relative;
|
||||
border-bottom: solid 1px rgb(51 65 85/0.5);
|
||||
}
|
||||
|
||||
.h2warp-body ul:not(.style-none)>li::before {
|
||||
.h2wrap-body ul:not(.style-none)>li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
@ -298,25 +305,25 @@ ol, ul, menu {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.h2warp-body ul li,
|
||||
.h2warp-body ol li,
|
||||
.h2warp-body dl li {
|
||||
.h2wrap-body ul li,
|
||||
.h2wrap-body ol li,
|
||||
.h2wrap-body dl li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.warp-body ul:last-child {
|
||||
.wrap-body ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warp-body ul:last-child li:last-child {
|
||||
.wrap-body ul:last-child li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.h3warp hr {
|
||||
.h3wrap hr {
|
||||
border-bottom: 1px solid #475060;
|
||||
}
|
||||
|
||||
.h2warp-body {
|
||||
.h2wrap-body {
|
||||
display: grid;
|
||||
gap: 1.75rem;
|
||||
font-size: 0.925rem;
|
||||
@ -325,7 +332,7 @@ ol, ul, menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.h2warp-body > .warp {
|
||||
.h2wrap-body > .wrap {
|
||||
background-color: #1e293b;
|
||||
color: rgb(203 213 225/1);
|
||||
position: relative;
|
||||
@ -437,7 +444,7 @@ pre {
|
||||
.row-span-4 {
|
||||
grid-row: span 4/span 4;
|
||||
}
|
||||
.wrap {
|
||||
.wrap-text {
|
||||
white-space: pre-wrap !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
@ -604,7 +611,7 @@ pre {
|
||||
/* 代码高亮 End */
|
||||
|
||||
|
||||
.footer-warp {
|
||||
.footer-wrap {
|
||||
margin-top: 3.5rem;
|
||||
color: rgb(100 116 139/1);
|
||||
background-color: rgb(30 41 59/1);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user