From e3bf142ea4e4eee09c050d448a9774ea9b878432 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Mon, 14 Nov 2022 10:22:24 +0000 Subject: [PATCH] doc: add npx document in npm.md #65 9c3ad5a30021d58a30756dfbe9010db4f6bca382 --- docs/npm.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++- style/style.css | 10 +++++++++ 2 files changed, 65 insertions(+), 1 deletion(-) diff --git a/docs/npm.html b/docs/npm.html index 8ea3493c..b527191a 100644 --- a/docs/npm.html +++ b/docs/npm.html @@ -42,7 +42,7 @@

这个 npm 快速参考备忘单显示了它的常用命令使用清单

常用命令

+

常用命令

包管理

@@ -283,6 +283,60 @@ # 将注册表切换到 cnpm $ nrm use cnpm +

npx

+

介绍

+

从本地或远程 npm 包运行命令

+
npx -- <pkg>[@<version>] [args...]
+npx --package=<pkg>[@<version>] -- <cmd> [args...]
+npx -c '<cmd> [args...]'
+npx --package=foo -c '<cmd> [args...]'
+
+ +

npx 二进制文件在 npm v7.0.0 中被重写，并且当时不推荐使用独立的 npx 包

+
$ npm install eslint
+# 运行：
+$ ./node_modules/.bin/eslint
+
+

上面命令简化，直接运行下面👇命令

+
$ npx eslint
+
+

命令 npx 将自动安装并运行 eslint

+

npx VS npm exec

+
$ npx foo@latest bar --package=@npmcli/foo
+# npm 将解析 foo 包名，并运行以下命令：
+$ foo bar --package=@npmcli/foo
+
+ +

由于 npm 的参数解析逻辑，运行这个命令是不同的:

+
$ npm exec foo@latest bar --package=@npmcli/foo
+# npm 将首先解析 --package 选项
+# 解析 @npmcli/foo 包
+# 然后，它将在该上下文中执行以下命令：
+$ foo@latest bar
+
+ +

下面命令是与 npx 等效的

+
$ npm exec -- foo@latest bar --package=@npmcli/foo
+# 等效的
+$ npx foo@latest bar --package=@npmcli/foo
+
+ +

npx VS npm exec 示例

+

使用提供的参数在本地依赖项中运行 tap 版本：

+
$ npm exec -- tap --bail test/foo.js
+$ npx tap --bail test/foo.js
+
+

通过指定 --package 选项运行名称与包名称匹配的命令以外的命令：

+
$ npm exec --package=foo -- bar --bar-argument
+# ~ or ~
+$ npx --package=foo bar --bar-argument
+
+ +

在当前项目的上下文中运行任意 shell 脚本：

+
$ npm x -c 'eslint && say "hooray, lint passed"'
+$ npx -c 'eslint && say "hooray, lint passed"'
+
+

配置

.npmrc

diff --git a/style/style.css b/style/style.css index 15af3cfc..ff36858e 100644 --- a/style/style.css +++ b/style/style.css @@ -723,6 +723,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { background-color: var(--color-bg-subtle); } +.wrap-header.h3wrap > .wrap-body > p:only-child, +.h3wrap-body p:only-child { + background-color: transparent !important; + border-radius: 0.5rem; +} + +.wrap-header.h3wrap > .wrap-body > p:only-child:before { + background-color: transparent !important; +} + .wrap-header.h3wrap > .wrap-body > p:first-child:before { background-color: var(--color-bg-subtle); color: rgb(30 41 59/0);