devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add package.json cheatsheet.

Browse Source
This commit is contained in:
jaywcjlove
2022-09-28 13:35:52 +08:00
parent 5234cdc024
commit 7ab9ddf766
16 changed files with 715 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -17,6 +17,7 @@ Quick Reference
## 工具包 ## 工具包
[npm](./docs/npm.md) [npm](./docs/npm.md)
[package.json](./docs/package.json.md)
[VSCode](./docs/vscode.md) [VSCode](./docs/vscode.md)
[Sketch](./docs/sketch.md) [Sketch](./docs/sketch.md)
[Jest](./docs/jest.md) [Jest](./docs/jest.md)

2
docs/cron.md
View File

@@ -84,7 +84,7 @@ Min Hour Day Mon Weekday
### 特殊字符 ### 特殊字符
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
| 特殊字符 | 说明 | | 特殊字符 | 说明 |

10
docs/git.md
View File

@@ -27,7 +27,7 @@ $ git clone git_url 指定目录
``` ```
### 做出改变 ### 做出改变
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
在工作目录中**显示**修改后的文件，为您的下一次提交暂存 在工作目录中**显示**修改后的文件，为您的下一次提交暂存
@@ -368,10 +368,10 @@ $ git log -p <file_name>
```shell ```shell
$ git log --pretty=oneline --graph --decorate --all $ 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 记录 ### 修改远程 Commit 记录
<!--rehype:warp-class=row-span-4--> <!--rehype:wrap-class=row-span-4-->
<!--rehype:--> <!--rehype:-->
```shell ```shell
@@ -519,7 +519,7 @@ $ git rev-parse --short HEAD # e10721c
```shell ```shell
$ git branch --merged master | grep -v '^\*\| master' | xargs -n 1 git branch -d $ git branch --merged master | grep -v '^\*\| master' | xargs -n 1 git branch -d
``` ```
<!--rehype:className=wrap--> <!--rehype:className=wrap-text-->
### 中文乱码的解决方案 ### 中文乱码的解决方案

36
docs/javascript.md
View File

@@ -127,7 +127,7 @@ let age = 7;
``` ```
### 字符串 ### 字符串
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -154,7 +154,7 @@ abc.split("");
``` ```
### 数字 ### 数字
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -211,7 +211,7 @@ Math.floor(Math.random() * 5) + 1;
``` ```
### 全局函数 ### 全局函数
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -247,7 +247,7 @@ JavaScript 条件
### 操作符 ### 操作符
<!--rehype:warp-class=row-span-3--> <!--rehype:wrap-class=row-span-3-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -401,7 +401,7 @@ const rocketToMars = function() {
``` ```
### 箭头函数 (ES6) ### 箭头函数 (ES6)
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
#### 有两个参数 #### 有两个参数
@@ -494,7 +494,7 @@ JavaScript 范围
---- ----
### 范围 ### 范围
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -793,7 +793,7 @@ for (let index in fruits) {
``` ```
### label 语句 ### label 语句
<!--rehype:warp-class= row-span-2--> <!--rehype:wrap-class= row-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -827,7 +827,7 @@ for (let fruit of fruits) {
``` ```
### for await...of ### for await...of
<!--rehype:warp-class= row-span-2--> <!--rehype:wrap-class= row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -972,7 +972,7 @@ console.log(classElection.place); // undefined
``` ```
### 可变的 ### 可变的
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1041,7 +1041,7 @@ console.log(origObj.color);
``` ```
### 工厂函数 ### 工厂函数
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1119,7 +1119,7 @@ JavaScript Classes
---- ----
### 静态方法/字段 ### 静态方法/字段
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1311,7 +1311,7 @@ JavaScript Promises
---- ----
### Promise ### Promise
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
创建 promises 创建 promises
@@ -1416,7 +1416,7 @@ promise.catch((err) => {
``` ```
### Promise.all() ### Promise.all()
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1457,7 +1457,7 @@ promise.then(res => {
``` ```
### 避免嵌套的 Promise 和 .then() ### 避免嵌套的 Promise 和 .then()
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1484,7 +1484,7 @@ JavaScript Async-Await
<!--rehype:body-class=cols-2--> <!--rehype:body-class=cols-2-->
### 异步 ### 异步
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1611,7 +1611,7 @@ req.send();
``` ```
### POST ### POST
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1634,7 +1634,7 @@ xhr.onerror = () => {
``` ```
### fetch api ### fetch api
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript
@@ -1695,7 +1695,7 @@ fetch('https://api-xxx.com/endpoint', {
``` ```
### async await 语法 ### async await 语法
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```javascript ```javascript

16
docs/jest.md
View File

@@ -17,7 +17,7 @@ Jest 是一款优雅、简洁的 JavaScript 测试框架。
- 代码覆盖， 无需其他操作，您仅需添加 --coverage 参数来生成代码覆盖率报告。 - 代码覆盖， 无需其他操作，您仅需添加 --coverage 参数来生成代码覆盖率报告。
### 测试结构 ### 测试结构
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -150,7 +150,7 @@ expect([{ a: 1 }, { b: 2 }]).toEqual([
``` ```
### 模拟函数 ### 模拟函数
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -293,7 +293,7 @@ expect(fn).toThrowErrorMatchingSnapshot()
---- ----
### 实例 ### 实例
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。 请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。
@@ -330,7 +330,7 @@ test('async test', async () => {
``` ```
### done() 回调 ### done() 回调
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -371,7 +371,7 @@ test('async test', () => {
## 模拟 ## 模拟
### 模拟函数 ### 模拟函数
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```js ```js
@@ -409,7 +409,7 @@ const callback = jest.fn(() => true)
[模拟函数文档](https://jestjs.io/docs/en/mock-function-api) [模拟函数文档](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:--> <!--rehype:-->
为使用本机计时器函数（`setTimeout`、`setInterval`、`clearTimeout`、`clearInterval`）的代码编写同步测试。 为使用本机计时器函数（`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:--> <!--rehype:-->
对于一个模拟 对于一个模拟

8
docs/json.md
View File

@@ -47,7 +47,7 @@ JSON 备忘清单
<!--rehype:class=table-thead-hide--> <!--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:--> <!--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:--> <!--rehype:-->
| Type | Description | | Type | Description |
@@ -229,7 +229,7 @@ let myObject = {
<!--rehype:class=table-thead-hide--> <!--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:--> <!--rehype:-->
```javascript ```javascript
@@ -273,7 +273,7 @@ let myObject = {
<!--rehype:class=table-thead-hide--> <!--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:--> <!--rehype:-->
```javascript ```javascript

6
docs/markdown.md
View File

@@ -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:--> <!--rehype:-->
```markdown ```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:--> <!--rehype:-->
```markdown ```markdown
@@ -188,7 +188,7 @@ console.log("This is a block code")
Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/) 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:--> <!--rehype:-->
```markdown ```markdown

2
docs/npm.md
View File

@@ -56,7 +56,7 @@ npm 备忘清单
### 杂项功能 ### 杂项功能
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
将某人添加为所有者 将某人添加为所有者

597
docs/package.json.md Normal file
View 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)_

4
docs/sketch.md
View File

@@ -24,7 +24,7 @@ Sketch 备忘清单
### 类型 ### 类型
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
| 快捷键 | 类型 | | 快捷键 | 类型 |
@@ -46,7 +46,7 @@ Sketch 备忘清单
### 画布视图 ### 画布视图
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
| 画布视图 | 快捷键 | | 画布视图 | 快捷键 |

6
docs/toml.md
View File

@@ -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:--> <!--rehype:-->
```toml ```toml
@@ -171,7 +171,7 @@ bar = 2
``` ```
### 类数组 ### 类数组
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```toml ```toml
@@ -249,7 +249,7 @@ bat = "hi"
``` ```
### Inline Table ### Inline Table
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```toml ```toml

28
docs/typescript.md
View File

@@ -66,7 +66,7 @@ Object, String, Number, Boolean
``` ```
### 通用语法 ### 通用语法
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```ts ```ts
@@ -93,7 +93,7 @@ interface JSONResponse extends Response, HTTPAble {
``` ```
### 泛型 ### 泛型
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
声明一个可以在你的 Interface 中改变的类型 声明一个可以在你的 Interface 中改变的类型
@@ -182,7 +182,7 @@ Type
---- ----
### Type vs Interface ### Type vs Interface
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
- Interface 只能描述对象形状 - Interface 只能描述对象形状
- Interface 可以通过多次声明来扩展 - Interface 可以通过多次声明来扩展
@@ -261,7 +261,7 @@ const data: import("./data").data
这些功能非常适合构建库、描述现有的 JavaScript 代码，您可能会发现在大多数 TypeScript 应用程序中很少使用它们。 这些功能非常适合构建库、描述现有的 JavaScript 代码，您可能会发现在大多数 TypeScript 应用程序中很少使用它们。
### 对象字面量语法 ### 对象字面量语法
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```ts ```ts
@@ -300,7 +300,7 @@ type ArtistSub = Subscriber<Artist>
类似于类型系统的映射语句，允许输入类型更改新类型的结构。 类似于类型系统的映射语句，允许输入类型更改新类型的结构。
### 模板联合类型 ### 模板联合类型
<!--rehype:warp-class=col-span-3--> <!--rehype:wrap-class=col-span-3-->
<!--rehype:--> <!--rehype:-->
```ts ```ts
@@ -314,7 +314,7 @@ type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`;
``` ```
### 条件类型 ### 条件类型
<!--rehype:warp-class=col-span-3--> <!--rehype:wrap-class=col-span-3-->
<!--rehype:--> <!--rehype:-->
```ts ```ts
@@ -330,7 +330,7 @@ type FourLegs = HasFourLegs<Animals>
---- ----
### If 声明 ### If 声明
<!--rehype:warp-class=row-span-3--> <!--rehype:wrap-class=row-span-3-->
#### typeof（用于原语） #### typeof（用于原语）
@@ -377,7 +377,7 @@ if (Array.isArray(input)) {
``` ```
### 任务 ### 任务
<!--rehype:warp-class=row-span-3--> <!--rehype:wrap-class=row-span-3-->
<!--rehype:--> <!--rehype:-->
```ts ```ts
@@ -556,7 +556,7 @@ class C implements Bag {}
``` ```
### 通用语法 ### 通用语法
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```ts ```ts
@@ -643,7 +643,7 @@ class Dog extends Animal { getName(): { ... } }
一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。 一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。
### 装饰器和属性 ### 装饰器和属性
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```ts ```ts
@@ -1143,7 +1143,7 @@ declare namespace JSX {
``` ```
### 函数组件 ### 函数组件
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```tsx ```tsx
@@ -1187,7 +1187,7 @@ function Dog(prop:CeProps): JSX.Element {
``` ```
### 函数子组件 ### 函数子组件
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```tsx ```tsx
@@ -1211,7 +1211,7 @@ Menu.SubMenu = SubMenu;
``` ```
### 有效组件 ### 有效组件
<!--rehype:warp-class=row-span-2--> <!--rehype:wrap-class=row-span-2-->
<!--rehype:--> <!--rehype:-->
```tsx ```tsx
@@ -1245,7 +1245,7 @@ function NotAValidFactoryFunction() {
### 类组件 ### 类组件
<!--rehype:warp-class=col-span-2--> <!--rehype:wrap-class=col-span-2-->
<!--rehype:--> <!--rehype:-->
```ts ```ts

2
docs/vscode.md
View File

@@ -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;-->
| - | - | | - | - |
|---------------------------|------------------------------------| |---------------------------|------------------------------------|

22
scripts/create.mjs
View File

@@ -58,19 +58,19 @@ export function getTocsTree(arr = [], result = []) {
if (toc.number === level && titleNum === level) { if (toc.number === level && titleNum === level) {
const header = getHeader(data.slice(n), level); const header = getHeader(data.slice(n), level);
const warpCls = ['warp']; const wrapCls = ['wrap'];
const headerCls = ['warp-header', `h${level}warp`]; const headerCls = ['wrap-header', `h${level}wrap`];
if (level === 1) warpCls.push('max-container'); if (level === 1) wrapCls.push('max-container');
const warpStyle = toc.properties['data-warp-style']; const wrapStyle = toc.properties['data-wrap-style'];
delete toc.properties['data-warp-style'] delete toc.properties['data-wrap-style']
const warpClass = toc.properties['warp-class']; const wrapClass = toc.properties['wrap-class'];
if (warpClass) warpCls.push(warpClass); if (wrapClass) wrapCls.push(wrapClass);
delete toc.properties['warp-class']; delete toc.properties['wrap-class'];
const panle = { const panle = {
type: 'element', type: 'element',
tagName: 'div', tagName: 'div',
properties: { class: warpCls, style: warpStyle }, properties: { class: wrapCls, style: wrapStyle },
children: [ children: [
{ {
type: 'element', type: 'element',
@@ -81,7 +81,7 @@ export function getTocsTree(arr = [], result = []) {
{ {
type: 'element', type: 'element',
tagName: 'div', tagName: 'div',
properties: { class: 'warp-body' }, properties: { class: 'wrap-body' },
children: [ children: [
...header ...header
], ],
@@ -101,7 +101,7 @@ export function getTocsTree(arr = [], result = []) {
panle.children = panle.children.concat({ panle.children = panle.children.concat({
type: 'element', type: 'element',
tagName: 'div', tagName: 'div',
properties: { class: [`h${level}warp-body`, bodyClass], style: bodyStyle }, properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
children: [...resultChilds] children: [...resultChilds]
}); });
} }

2
scripts/nodes/footer.mjs
View File

@@ -4,7 +4,7 @@ export function footer() {
type: 'element', type: 'element',
tagName: 'footer', tagName: 'footer',
properties: { properties: {
class: 'footer-warp', class: 'footer-wrap',
}, },
children: [ children: [
{ {

83
scripts/style.css
View File

@@ -45,18 +45,18 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
padding: 0.75rem; padding: 0.75rem;
} }
body.home .h1warp-body, body.home .h1warp .warp-body { body.home .h1wrap-body, body.home .h1wrap .wrap-body {
max-width: 940px; max-width: 940px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0.75rem; padding: 0.75rem;
} }
body.home .h2warp > h2 { body.home .h2wrap > h2 {
display: inline-block; display: inline-block;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
body.home .h2warp > h2::after { body.home .h2wrap > h2::after {
content: ' '; content: ' ';
display: block; display: block;
height: 3px; height: 3px;
@@ -65,15 +65,15 @@ body.home .h2warp > h2::after {
--bg-opacity: 1; --bg-opacity: 1;
background-color: rgb(30 41 59/var(--bg-opacity)); 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; margin-top: 1.6rem;
} }
body.home .h1warp .warp-body p { body.home .h1wrap .wrap-body p {
text-indent: 2rem; text-indent: 2rem;
} }
body.home .h1warp p { body.home .h1wrap p {
text-align: left; text-align: left;
} }
@@ -150,29 +150,29 @@ body.home .h1warp p {
gap: 0.3rem; gap: 0.3rem;
} }
.warp-header.h1warp { .wrap-header.h1wrap {
text-align: center; text-align: center;
margin-top: 4.6rem; margin-top: 4.6rem;
margin-bottom: 5rem; margin-bottom: 5rem;
} }
.warp-header.h1warp .warp-body { .wrap-header.h1wrap .wrap-body {
color: rgb(71 85 105/1); color: rgb(71 85 105/1);
} }
.warp-header.h1warp > h1 { .wrap-header.h1wrap > h1 {
font-size: 3rem; font-size: 3rem;
line-height: 1; line-height: 1;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.h1warp-body { .h1wrap-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3rem; gap: 3rem;
} }
.warp-header.h2warp > h2 { .wrap-header.h2wrap > h2 {
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-bottom: 24px; margin-bottom: 24px;
@@ -184,7 +184,14 @@ body.home .h1warp p {
margin-top: 0; 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; z-index: 0;
display: flex; display: flex;
height: 100%; height: 100%;
@@ -192,7 +199,7 @@ body.home .h1warp p {
flex-direction: column; flex-direction: column;
} }
.warp-header.h3warp > h3 { .wrap-header.h3wrap > h3 {
color: rgb(226 232 240/1); color: rgb(226 232 240/1);
position: absolute; position: absolute;
right: 0px; right: 0px;
@@ -209,7 +216,7 @@ body.home .h1warp p {
letter-spacing: 0.05em; 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; margin: 0px;
width: 100%; width: 100%;
padding-left: 1rem; padding-left: 1rem;
@@ -220,7 +227,7 @@ body.home .h1warp p {
background-color: rgb(15 23 42/0.3); 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); background-color: rgb(15 23 42/0.3);
color: rgb(30 41 59/0); color: rgb(30 41 59/0);
content: '-'; content: '-';
@@ -231,11 +238,11 @@ body.home .h1warp p {
width: 100%; width: 100%;
} }
.warp-header.h3warp > .warp-body p:last-child { .wrap-header.h3wrap > .wrap-body p:last-child {
margin-top: auto; margin-top: auto;
} }
.warp-header.h3warp > .warp-body { .wrap-header.h3wrap > .wrap-body {
z-index: 0; z-index: 0;
display: flex; display: flex;
height: 100%; height: 100%;
@@ -243,7 +250,7 @@ body.home .h1warp p {
flex-direction: column; flex-direction: column;
} }
.h4warp > h4 { .h4wrap > h4 {
border-color: rgb(51 65 85/0.5); border-color: rgb(51 65 85/0.5);
background-color: rgb(51 65 85/0.3); background-color: rgb(51 65 85/0.3);
color: rgb(203 213 225/1); color: rgb(203 213 225/1);
@@ -263,13 +270,13 @@ ol, ul, menu {
padding: 0; padding: 0;
} }
.h4warp > .warp-body ul, .h4wrap > .wrap-body ul,
.h4warp > .warp-body ol, .h4wrap > .wrap-body ol,
.h4warp > .warp-body dl, .h4wrap > .wrap-body dl,
.h3warp > .warp-body ul, .h3wrap > .wrap-body ul,
.h3warp > .warp-body ol, .h3wrap > .wrap-body ol,
.h3warp > .warp-body dl { .h3wrap > .wrap-body dl {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: grid; display: grid;
@@ -277,16 +284,16 @@ ol, ul, menu {
grid-template-columns: repeat(1,minmax(0,1fr)); grid-template-columns: repeat(1,minmax(0,1fr));
} }
.h2warp-body ul li, .h2wrap-body ul li,
.h2warp-body ol li, .h2wrap-body ol li,
.h2warp-body dl li { .h2wrap-body dl li {
padding: 9px; padding: 9px;
padding-left: 26px; padding-left: 26px;
position: relative; position: relative;
border-bottom: solid 1px rgb(51 65 85/0.5); 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: ''; content: '';
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@@ -298,25 +305,25 @@ ol, ul, menu {
top: 18px; top: 18px;
} }
.h2warp-body ul li, .h2wrap-body ul li,
.h2warp-body ol li, .h2wrap-body ol li,
.h2warp-body dl li { .h2wrap-body dl li {
position: relative; position: relative;
} }
.warp-body ul:last-child { .wrap-body ul:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.warp-body ul:last-child li:last-child { .wrap-body ul:last-child li:last-child {
border-bottom: 0; border-bottom: 0;
} }
.h3warp hr { .h3wrap hr {
border-bottom: 1px solid #475060; border-bottom: 1px solid #475060;
} }
.h2warp-body { .h2wrap-body {
display: grid; display: grid;
gap: 1.75rem; gap: 1.75rem;
font-size: 0.925rem; font-size: 0.925rem;
@@ -325,7 +332,7 @@ ol, ul, menu {
flex-direction: column; flex-direction: column;
} }
.h2warp-body > .warp { .h2wrap-body > .wrap {
background-color: #1e293b; background-color: #1e293b;
color: rgb(203 213 225/1); color: rgb(203 213 225/1);
position: relative; position: relative;
@@ -437,7 +444,7 @@ pre {
.row-span-4 { .row-span-4 {
grid-row: span 4/span 4; grid-row: span 4/span 4;
} }
.wrap { .wrap-text {
white-space: pre-wrap !important; white-space: pre-wrap !important;
overflow-wrap: break-word !important; overflow-wrap: break-word !important;
} }
@@ -604,7 +611,7 @@ pre {
/* 代码高亮 End */ /* 代码高亮 End */
.footer-warp { .footer-wrap {
margin-top: 3.5rem; margin-top: 3.5rem;
color: rgb(100 116 139/1); color: rgb(100 116 139/1);
background-color: rgb(30 41 59/1); background-color: rgb(30 41 59/1);