npmTo 容器
概述
npmTo 容器用于将 npm 命令行转换为 pnpm / yarn / deno / bun 的命令行，并它们作为 代码块组呈现在页面。
在 ::: npm-to 容器中，只需要写 一次 npm 命令 代码块即可。
为什么需要 npmTo 容器 ？
在我编写文档时，常常需要提供 pnpm / yarn / npm 等不同运行环境的命令，需要写多个代码块并包装在 ::: code-tabs 容器中。它占据了我不少的工作量，而且还占据了 markdown 内容中的很长一部分空间，体验并不友好。 因此我编写了这个 ::: npm-to 容器以解决这个问题。
用法
::: npm-to
``` sh
npm install -D vuepress vuepress-theme-plume
```
::: 将 包含 npm 命令行的代码块，包裹在 ::: npm-to 容器中即可。
npm-to 容器仅支持存在单个代码块，不能包含其他内容
上述代码在内部会被转换为：
::: code-tabs
@tab pnpm
``` sh
pnpm add -D vuepress vuepress-theme-plume
```
@tab yarn
``` sh
yarn add -D vuepress vuepress-theme-plume
```
@tab npm
``` sh
npm install -D vuepress vuepress-theme-plume
```
:::最终会在页面中呈现为：
pnpm
pnpm add -D vuepressvuepress-theme-plumeyarn
yarn add -D vuepressvuepress-theme-plumenpm
npm install -D vuepress vuepress-theme-plume还可以控制 代码块组中的代码块的显示顺序，如下所示：
输入：
::: npm-to tabs="npm,yarn,pnpm,bun,deno"
``` sh
npm install -D vuepress vuepress-theme-plume
```
::: 输出：
npm
npm install -D vuepress vuepress-theme-plumeyarn
yarn add -D vuepressvuepress-theme-plumepnpm
pnpm add -D vuepressvuepress-theme-plumebun
bun add -D vuepressvuepress-theme-plumedeno
deno add -D vuepressvuepress-theme-plume配置
该功能默认不启用，您需要在 theme 配置中启用它。
.vuepress/config.ts
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
// npmTo: true, // 启用，并使用默认配置
npmTo: {
tabs: ['npm', 'yarn', 'pnpm'], // 代码块组默认显示顺序
}
},
}
})
})npm-to 支持将 npm 命令行转换为 pnpm / yarn / deno / bun 的命令行。可以根据需求进行配置 tabs 。
命令行支持
npmTo 并不对 npm 的所有命令行提供支持，以下是支持的列表：
npm install/npm inpm run/npm run-scriptnpm initnpm createnpm uninstall/npm rm/npm remove/npm un/npm unlinknpm cinpx
相关信息
对于不支持的命令行，npmTo 不会处理它们，仅将它们复制到其他的代码块中。
示例
输入：
::: npm-to
```sh
npm install && npm run docs:dev
```
:::输出：
pnpm
pnpm install && pnpm docs:devyarn
yarn && yarn docs:devnpm
npm install && npm run docs:dev输入：
::: npm-to
```sh
npm i -D vue
npm i --save-peer vuepress
npm i typescript
```
:::输出：
pnpm
pnpm add -D vue
pnpm add --save-peer vuepress
pnpm add typescriptyarn
yarn add -D vue
yarn add --peer vuepress
yarn add typescriptnpm
npm i -D vue
npm i --save-peer vuepress
npm i typescript输入：
::: npm-to
```sh
npm run docs:dev -- --clean-cache
```
:::输出：
pnpm
pnpm docs:dev --clean-cacheyarn
yarn docs:dev --clean-cachenpm
npm run docs:dev -- --clean-cache输入：
::: npm-to tabs="pnpm,yarn,npm,bun,deno"
```sh
npm ci
```
:::输出：
pnpm
pnpm install --frozen-lockfileyarn
yarn install --immutablenpm
npm cibun
bun install --frozen-lockfiledeno
deno install --frozen贡献者
withesse
变更历史
最后更新于:
- -于 2024/12/25