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

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

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

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

package.json（ルート）
  "workspaces": [
    "workspace-name"
  ]

package.json（ワークスペース）
{
  "name": "workspace-name",
}

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

ルートプロジェクトの package.json に "type": "module"と"private": "true"を追加します。 CJS 形式のファイルを正しく読み込むために、 "type": "module" は設定が必須です。 "private": "true"は、誤ってルートプロジェクトが公開されることを防ぐため、設定を推奨します。

package.json（ルート）
{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

スクリプトの登録⚓︎

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

package.json（ルート）
{
  "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
{
  "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,
  },
}