pnpm - 高速、かつディスク容量効率が良いパッケージマネージャー

pnpm - 高速、かつディスク容量効率が良いパッケージマネージャー

文書の過去の版を表示しています。

本家: Fast, disk space efficient package manager | pnpm (英語)
　　　Fast, disk space efficient package manager | pnpm (日本語)
ソースコード: GitHub - pnpm/pnpm: Fast, disk space efficient package manager
ライセンス: MIT License

公式: インストール | pnpm
スタンドアロンスクリプトを使用してインストールする😉

$ curl -fsSL https://get.pnpm.io/install.sh | sh -

==> Downloading pnpm binaries 9.8.0
 WARN  using --force I sure hope you know what you are doing
Copying pnpm CLI from /tmp/tmp.mOCIb0d59q/pnpm to /home/tomoyan/.local/share/pnpm/pnpm
Appended new lines to /home/tomoyan/.zshrc

Next configuration changes were made:
export PNPM_HOME="/home/tomoyan/.local/share/pnpm"
case ":$PATH:" in
  *":$PNPM_HOME:"*) ;;
  *) export PATH="$PNPM_HOME:$PATH" ;;
esac

To start using pnpm, run:
source /home/tomoyan/.zshrc

$ . ~/.zshrc

公式: pnpm env <cmd> | pnpm
Node.js LTS をインストールする🤔

$ pnpm env add -g lts

Fetching Node.js 20.17.0 ...
Node.js 20.17.0 was installed
  /home/tomoyan/.local/share/pnpm/nodejs/20.17.0
All specified Node.js versions were installed

Or

$ pnpm env use -g lts

Node.js 20.17.0 was installed
  /home/tomoyan/.local/share/pnpm/nodejs/20.17.0
Node.js 20.17.0 was activated
/home/tomoyan/.local/share/pnpm/node -> /home/tomoyan/.local/share/pnpm/nodejs/20.17.0/bin/node

公式: GitHub - yoshi389111/dq2pswd: ふっかつのじゅもんを作れます。２の方です。

ここでは React アプリのサンプルとして、ドラクエⅡ🐉の「ふっかつのじゅもん２」を動かす😅

GitHub よりソースコードをクローン

$ git clone https://github.com/yoshi389111/dq2pswd.git

Cloning into 'dq2pswd'...
remote: Enumerating objects: 204, done.
remote: Counting objects: 100% (204/204), done.
remote: Compressing objects: 100% (143/143), done.
remote: Total 204 (delta 115), reused 147 (delta 58), pack-reused 0 (from 0)
Receiving objects: 100% (204/204), 554.01 KiB | 4.86 MiB/s, done.
Resolving deltas: 100% (115/115), done.

依存パッケージをインストール

$ cd dq2pswd
$ pnpm install

Lockfile is up to date, resolution step is skipped
Packages: +1258
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1258, reused 1258, downloaded 0, added 1258, done

dependencies:
+ @testing-library/jest-dom 5.17.0
+ @testing-library/react 13.4.0
+ @testing-library/user-event 13.5.0
+ @types/jest 27.5.2
+ @types/node 16.18.112
+ @types/react 18.3.10
+ @types/react-dom 18.3.0
+ react 18.3.1
+ react-dom 18.3.1
+ react-scripts 5.0.1
+ typescript 4.9.5
+ web-vitals 2.1.4

devDependencies:
+ @typescript-eslint/eslint-plugin 5.62.0
+ @typescript-eslint/parser 5.62.0
+ eslint 8.57.1
+ eslint-config-prettier 8.10.0
+ prettier 2.8.8

Done in 7.5s

React アプリを開始して http://localhost:3000/dq2pswd にアクセスして動作確認する😉

$ pnpm start

Compiled successfully!

You can now view dq2pswd in the browser.

  Local:            http://localhost:3000/dq2pswd
  On Your Network:  http://192.168.1.80:3000/dq2pswd

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

package.json を編集して @testing-library/jest-dom を最新化する🤔

$ git diff

diff --git a/package.json b/package.json
index 53ace06..2d5556c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "/dq2pswd/",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
(END)

@testing-library/jest-dom を更新する🤔

$ pnpm install

 WARN  21 deprecated subdependencies found: @babel/plugin-proposal-class-properties@7.18.6, @babel/plugin-proposal-nullish-coalescing-operator@7.18.6, @babel/plugin-proposal-numeric-separator@7.18.6, @babel/plugin-proposal-optional-chaining@7.21.0, @babel/plugin-proposal-private-methods@7.18.6, @babel/plugin-proposal-private-property-in-object@7.21.11, @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, abab@2.0.6, domexception@2.0.1, glob@7.2.3, inflight@1.0.6, q@1.5.1, rimraf@3.0.2, rollup-plugin-terser@7.0.2, sourcemap-codec@1.4.8, stable@0.1.8, svgo@1.3.2, w3c-hr-time@1.0.2, workbox-cacheable-response@6.6.0, workbox-google-analytics@6.6.0
Packages: +2 -2
++--
Progress: resolved 1259, reused 1258, downloaded 0, added 2, done

dependencies:
- @testing-library/jest-dom 5.17.0
+ @testing-library/jest-dom 6.5.0

Done in 6.5s

リビルドする🤔

$ pnpm build


> dq2pswd@0.1.0 build /home/tomoyan/my_projects/dq2pswd
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  56.61 kB  build/static/js/main.5e3185dc.js
  1.77 kB   build/static/js/163.18b91db1.chunk.js
  1.14 kB   build/static/css/main.7ffe0c1c.css

The project was built assuming it is hosted at /dq2pswd/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

anyenv - rbenv スタイルのオールインワン環境マネージャーでインストールした場合など、pnpm でNode.js の管理ができない😢

$ pnpm env add -g lts

 ERR_PNPM_CANNOT_MANAGE_NODE  Unable to manage Node.js because pnpm was not installed using the standalone installation script

If you want to manage Node.js with pnpm, you need to remove any Node.js that was installed by other tools, then install pnpm using one of the standalone scripts that are provided on the installation page: https://pnpm.io/installation

 ERR_PNPM_CANNOT_MANAGE_NODE  pnpm がスタンドアロン インストール スクリプトを使用してインストールされていないため、Node.js を管理できません

pnpm を使用して Node.js を管理する場合は、他のツールによってインストールされた Node.js をすべて削除し、インストール ページで提供されるスタンドアロン スクリプトの 1 つを使用して pnpm をインストールする必要があります: https://pnpm.io/installation

スタンドアロンスクリプトを使用してインストールし直す😉

$ npm uninstall -g pnpm


removed 1 package in 680ms

$ curl -fsSL https://get.pnpm.io/install.sh | sh -

==> Downloading pnpm binaries 9.8.0
 WARN  using --force I sure hope you know what you are doing
Copying pnpm CLI from /tmp/tmp.mOCIb0d59q/pnpm to /home/tomoyan/.local/share/pnpm/pnpm
Appended new lines to /home/tomoyan/.zshrc

Next configuration changes were made:
export PNPM_HOME="/home/tomoyan/.local/share/pnpm"
case ":$PATH:" in
  *":$PNPM_HOME:"*) ;;
  *) export PATH="$PNPM_HOME:$PATH" ;;
esac

To start using pnpm, run:
source /home/tomoyan/.zshrc

$ . ~/.zshrc

Node.js LTS をインストールする🤔

$ pnpm env add -g lts

Fetching Node.js 20.17.0 ...
Node.js 20.17.0 was installed
  /home/tomoyan/.local/share/pnpm/nodejs/20.17.0
All specified Node.js versions were installed

$ pnpm build


> dq2pswd@0.1.0 build /home/tomoyan/my_projects/dq2pswd
> react-scripts build

Creating an optimized production build...
Failed to compile.

TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
     6 |   render(<App />);
     7 |   const linkElement = screen.getByText(/ふっかつのじゅもん/i);
  >  8 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
     9 | });
    10 |


 ELIFECYCLE  Command failed with exit code 1.

$ bat -p --pager=never package.json

 {                    },         },         ]   },          ],         ]   },         } }

"name": "dq2pswd", "version": "0.1.0", "private": true, "homepage": "/dq2pswd/", "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.31", "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" "scripts": { "start": "react-scripts start", "build": "react-scripts build", "publish": "react-scripts build ; ./scripts/publish.sh", "test": "react-scripts test", "eject": "react-scripts eject" "eslintConfig": { "extends": [ "react-app", "react-app/jest" "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.59.7", "@typescript-eslint/parser": "^5.59.7", "eslint": "^8.41.0", "eslint-config-prettier": "^8.8.0", "prettier": "^2.8.8"

package.json を編集して @testing-library/jest-dom を最新化する🤔

$ git diff

diff --git a/package.json b/package.json
index 53ace06..2d5556c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "/dq2pswd/",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
(END)

@testing-library/jest-dom を更新する🤔

$ pnpm install

 WARN  21 deprecated subdependencies found: @babel/plugin-proposal-class-properties@7.18.6, @babel/plugin-proposal-nullish-coalescing-operator@7.18.6, @babel/plugin-proposal-numeric-separator@7.18.6, @babel/plugin-proposal-optional-chaining@7.21.0, @babel/plugin-proposal-private-methods@7.18.6, @babel/plugin-proposal-private-property-in-object@7.21.11, @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, abab@2.0.6, domexception@2.0.1, glob@7.2.3, inflight@1.0.6, q@1.5.1, rimraf@3.0.2, rollup-plugin-terser@7.0.2, sourcemap-codec@1.4.8, stable@0.1.8, svgo@1.3.2, w3c-hr-time@1.0.2, workbox-cacheable-response@6.6.0, workbox-google-analytics@6.6.0
Packages: +2 -2
++--
Progress: resolved 1259, reused 1258, downloaded 0, added 2, done

dependencies:
- @testing-library/jest-dom 5.17.0
+ @testing-library/jest-dom 6.5.0

Done in 6.5s

リビルドする🤔

$ pnpm build


> dq2pswd@0.1.0 build /home/tomoyan/my_projects/dq2pswd
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  56.61 kB  build/static/js/main.5e3185dc.js
  1.77 kB   build/static/js/163.18b91db1.chunk.js
  1.14 kB   build/static/css/main.7ffe0c1c.css

The project was built assuming it is hosted at /dq2pswd/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

React アプリを開始して http://localhost:3000/dq2pswd にアクセスして動作確認する😉

$ pnpm start

Compiled successfully!

You can now view dq2pswd in the browser.

  Local:            http://localhost:3000/dq2pswd
  On Your Network:  http://192.168.1.80:3000/dq2pswd

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

参考: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>' · Issue #546 · testing-library/jest-dom · GitHub

わたしReactわからないあるよ😅

漢方煎じ薬専門薬局、漢方薬局のすすめ🐶🐱🐘🐔🐰	2025/04/29 15:55	[ワタナベオイスター DHMBA Drink - ディーバドリンク🥤]
Firefox、Firefox Developer Edition	2025/04/27 08:53	[Firefox、Firefox Developer Edition]
pnpm - 高速、かつディスク容量効率が良いパッケージマネージャー	2025/04/27 08:07	[ERROR This project is configured to use yarn が発生する...🤪]
JupyterLab Extension 開発	2025/04/27 06:49	[error: subprocess-exited-with-error エラーでビルドが失敗する🤔]
Deno	2025/04/27 06:06	[参考文献]
Yarn - パッケージマネージャ	2025/04/25 10:46	[yarn のインストール]
JupyterLab memo	2025/04/24 10:29	[jlpm]
rsyncとsshを利用したリモートサーバの高速バックアップ	2025/04/24 04:39	[除外パターンを bash braces '{}' で効率よく書く✍😍]
🧠みそ😅	2025/04/23 17:52	[🧠みそ😅]

目次

pnpm - 高速、かつディスク容量効率が良いパッケージマネージャー

インストール

使い方

TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'. エラーが発生する場合🤔

トラブルシューティング

pnpm env add -g できない😅

TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'. エラーが発生する🤔

参考文献

付録

ともやん・どっと・ねっと