Zenn
📚

Yarn Workspacesをnpmに移してみた

2023/12/20に公開
npm
yarn
workspaces
monorepo
tech

https://docs.npmjs.com/cli/v7/using-npm/workspaces
自分の倍位はこのようなモノレポをnpm workspacesに変更してみました：

repo-name
│  backend
│  ├──  package.json
│  frontend
│  ├──  apps
│  │  ├──  user-1
│  │  │  └── package.json
│  │  └── user-2
│  │     └── package.json
│  ├── core
│  │  └── package.json
│  ├── packages
│  │  └── package.json
│  └── package.json
├── package.json
└── yarn.lock

必要な変更点

変更が必要だったのは基本的に3箇所でした

  1. yarn.lockとnode_modulesの削除
  2. packagesのworkspacesの書き方が変わってる可能性
  3. dependenciesに書く必要がなくなる（削除しないとエラーになる）

この3点を変更した後npm installして修正です

yarnの削除

yarn.lockの削除

rm yarn.lock

node_modulesの削除

npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules

こちらはscriptに入れちゃうのもいいかなと思います(rootのpackage.json)

"scripts": {
    "modules:delete": "npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules",
}

workspacesの指定

基本は両方同じ書き方ですけどこのような書き方の場合、下の書き方を参考に修正できます：
yarn workspaces

"workspaces": {
    "packages": [
        "backend",
        "frontend",
        "packages"
    ],
}

yarn & npm workspaces

"workspaces": [
    "backend",
    "frontend",
    "packages"
]

dependenciesの削除

最後にひとつだけ変わるのが、npmだとdependenciesにworkspacesを指定しなくてこimportすることが可能ということです：
yarn frontend/user-1/package.json

// 指定しなければimportできない仕組み
"dependencies": {
    "@project/backend": "1.0.0",
    "@project/packages": "1.0.0",
    "@frontend/core": "1.0.0",
    "some-random-library": "2.3.4"
}

yarn frontend/user-1/index.ts

// dependenciesに入ってるものから探す
import { MyFunction } from '@frontend/core/utils/common'

npm frontend/user-1/package.json

// 指定するとnpmからダウンロードしようとしてエラーが出る
"dependencies": {
    // "@project/backend": "1.0.0",
    // "@project/packages": "1.0.0",
    // "@frontend/core": "1.0.0",
    "some-random-library": "2.3.4"
}

npm frontend/user-1/index.ts

// 同じレポのものなら撮ってこれる
import { MyFunction } from '@frontend/core/utils/common'

npm参考エラー

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@project%2fbackend - Not found
npm ERR! 404 
npm ERR! 404  '@project/backend@1.0.0' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

install

以上の修正が終わったらインストールするときに問題ないはずです

npm install

Discussion