コンテンツにスキップ

ワークスペースの設定⚓︎

ブランクプロジェクトの作成 で作成したルートプロジェクトとワークスペースについて、 追加で必要な設定をします。

ワークスペースの定義⚓︎

ワークスペースの名称は、ルートプロジェクトの package.json の workspaces プロパティで定義し、この値はワークスペースの package.json の name プロパティと一致している必要があります。 ブランクプロジェクトの作成 に従って初期設定した場合は、自動的に構成されます。

package.json（ルート）
1
2
3
  "workspaces": [
    "workspace-name"
  ]
package.json（ワークスペース）
1
2
3
{
  "name": "workspace-name",
}

ルートプロジェクトの設定⚓︎

CI 時の Node.js や npm のバージョンを設定するために、ルートプロジェクトの package.json に "engines" を追加し、適切なバージョンを設定してください。 特別な理由がなければ、最新の LTS バージョンを指定します。 Node.js の LTS バージョンの情報については、 Node.js リリース を参照してください。

package.json（ルート）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "private": "true",
  "engines": {
    "node": "^x.x.x",
    "npm": ">=y.y.y"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

あわせて、ブランクプロジェクトの作成 で作成したワークスペース直下の package.json の "engines" に初期設定されているバージョンも、ルートプロジェクトと同じバージョンに設定してください。

package.json（ワークスペース）
1
2
3
4
5
6
7
{
  "name": "workspace-name",
  "engines": {
    "node": "^x.x.x",
    "npm": ">=y.y.y"
  },
}

設定ができたら、ルートプロジェクトの直下で npm install を行い、 package-lock.json が更新されることと、 "engines" のバージョンに関する警告が出力されないことを確認してください。

スクリプトの登録⚓︎

ルートプロジェクトの package.json にスクリプトを登録します。 -w オプションでワークスペース名を指定することで、指定したワークスペースの package.json に存在するスクリプトを実行できます。 設定例を下記に示します。

package.json（ルート）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  "scripts": {
    "lint:ci:workspace-name": "npm run lint:ci -w workspace-name",
    "type-check:workspace-name": "npm run type-check -w workspace-name",
    "build-only:dev:workspace-name": "npm run build-only:dev -w workspace-name",
    "build:prod:workspace-name": "npm run build:prod -w workspace-name",
    "test:unit:workspace-name": "npm run test:unit -w workspace-name",
    "dev:workspace-name": "npm run dev -w workspace-name",
    "mock:workspace-name": "npm run mock -w workspace-name"
  },
}

パッケージの依存関係の管理⚓︎

パッケージのバージョンは、ルートプロジェクトの package-lock.json で管理されます。各ワークスペースには package-lock.json は作成されません。 パッケージのインストール・バージョン更新は、 npm workspaces を使用しない場合と同様に、各ワークスペースで npm install を行います。 しかし、インストールしたパッケージの依存関係は、ルートプロジェクトの package-lock.json に記録されます。 また、各ワークスペースの package.json でバージョンを指定することで、ワークスペース間で異なるバージョンのパッケージを使用できます。

VS Code 上のワークスペースの設定⚓︎

ブランクプロジェクトの作成 時に、各ワークスペースの直下に .vscode フォルダーと設定ファイルが自動的に作成されます。 加えて、 VS Code で mono-repo 構成を扱う場合には、マルチルートワークスペース 機能が役立ちます。 追加でルートプロジェクトの直下に .code-workspaces ファイルを作成し、 npm workspaces のワークスペースの単位と、 VS Code のワークスペースの単位が対応するように設定します。 設定例を下記に示します。

サンプルアプリケーションの .code-workspace
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "folders": [
    {
      "name": "dressca-root",
      "path": ".",
    },
    {
      "name": "dressca-consumer",
      "path": "consumer",
    },
    {
      "name": "dressca-admin",
      "path": "admin",
    },
  ],
  "settings": {
    "typescript.tsdk": "dressca-root/node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true,
    "typescript.validate.enable": false,
  },
}