Hiratake Web ロゴ

pnpm + Turborepo で Nuxt アプリの monorepo 開発環境をつくる

投稿した日
更新した日
書いたひと
icon
ひらたけ

手っ取り早く環境をつくりたい

環境

ディレクトリ構造

monorepo/
　├ app/
　│　├ public/
　│　├ server/
　│　├ .eslintrc.js
　│　├ app.vue
　│　├ nuxt.config.ts
　│　├ package.json
　│　└ tsconfig.json
　├ packages/
　│　└ eslint-config-custom/
　│　　　├ index.js
　│　　　└ package.json
　├ .gitignore
　├ .npmrc
　├ package.json
　├ pnpm-lock.yaml
　├ pnpm-workspace.yaml
　└ turbo.json

monorepo のベースを作成

$ pnpm init

packages:
  - 'app'
  - 'packages/*'

Turborepo のインストール

$ pnpm add -wD turbo

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {}
}

Nuxt アプリケーションを作成

$ cd app
$ npx nuxi@latest init nuxt-app
$ mv nuxt-app/* .

{
  "scripts": {
    "build": "turbo run build" // 👈これを追加
  },
  ...
}

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/*", ".output/*", ".nuxt/*"]
    },
  }
}

$ pnpm build

ESLint の設定を追加

  • Prettier を導入しているので eslint-config-prettier は全てのプロジェクトで設定する
  • React と Vue.js のプロジェクトがそれぞれ複数あり、React のプロジェクトでは React 用の共通ルール、Vue.js のプロジェクトでは Vue.js 用の共通ルールを設定する
{
  "name": "eslint-config-custom",
  "version": "0.0.0",
  "private": true,
  "main": "index.js"
}

$ cd packages/eslint-config-custom
$ pnpm add @nuxt/eslint-config

module.exports = {
  extends: ['@nuxt/eslint-config'],
  rules: {
    // 任意のルールを追加
  },
}

$ cd ../../app
$ pnpm add -D eslint
$ pnpm add -D eslint-config-custom --workspace

module.exports = {
  root: true,
  extends: ['custom'],
}

{
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint . --ext .js,.ts,.vue" // 👈これを追加
  },
  ...
}

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/*", ".output/*", ".nuxt/*"]
    },
    "lint": {} // 👈これを追加
  }
}