Lerna nx nuxt(v3)の環境をとりあえ作成してみる

package dependency

package name	version	refs
lerna	5.1.4	lerna
nx	14.3.5	nx
nuxt	3.0.0-rc.4	nuxt

why do this?

lernaの開発が止まりnrwlが開発サポートして、pageが生まれ変わったため。
reactとangularはストレートにnrwlを使った方がメリットを享受できると思っている。。。

lernaのprojectを作成する
nxを有効にする
nuxiを利用してoverrideを実施
起動確認

1. lernaのprojectを作成する

yarnのwork spaceを作成して、lernaのpackageをインストールします。

$ mkdir lerna_sample & cd '$_'
$ yarn init -y
$ yarn add -D lerna@latest

lernaの環境を作成する

$ yarn lerna init
$ less package.json
{
  "name": "lerna_sample",
  "version": "1.0.0",
  "main": "index.js",
  "private": true,
  "devDependencies": {
    "lerna": "^5.1.4",
  }
}

lernaのyarnを利用しているため、npmClientの設定を追加します

$ less lerna.json
{
  "packages": ["packages/*"],
  "version": "0.0.0"
}

以下を追加

lerna.json

{
  "packages": ["packages/*"],
  "npmClient": "yarn", # ここを追記
  "version": "0.0.0"
}

いろいろErrorが出る人は、おそらくgitのuser.emailなどを設定してないので設定してください。

1. nxを有効にする

nxをdependencyに追加します

$ yarn add -D nx
$ less package.json
{
  "name": "lerna_sample",
  "version": "1.0.0",
  "main": "index.js",
  "private": true,
  "devDependencies": {
    "lerna": "^5.1.4",
    "nx": "^14.3.5"   //追記されている
  }
}

次にnxを有効化にするために、lerna.jsonに記載を追加します。

$ less lerna.json
{
  "packages": [ "packages/*"],
  "npmClient": "yarn",
  "version": "0.0.0"
}

useNxをtrueに設定する

lerna.json

{
  "packages": ["packages/*"],
  "useNx": true,
  "npmClient": "yarn",
  "version": "0.0.0"
}

nxが有効化されていることを確認するため、nxコマンドを利用して確認します

$ npx nx graph
>  NX   Project graph started at http://127.0.0.1:4211

3. nuxiを利用してPackageを追加する

とりあえず公式通りに、nuxtのプロジェクトを作成します。

$ pwd
PROJECT_DIRECTORY
$ cd packages
$ pwd
PROJECT_DIRECTORY/packages
$ npx nuxi init nuxt
$ cd nuxt
$ tree -L 1
.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
├── tsconfig.json

とりあえずインストールできているのが、確認できました。

4. 起動確認

最後に追加したnuxtの起動と、nxにpackageとして認識されているか確認します.

nuxtのpackageをインストールする

lerna bootstrapを利用してインストールします。

$ pwd
PROJECT_PATH
$ yarn lerna bootstrap
$ tree ./packages/nuxt -L 1
./packages/nuxt
├── README.md
├── app.vue
├── node_modules
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── yarn.lock

nuxtの起動を確認する

lerna runコマンドを利用して、packages/nuxt/package.json#scriptに記載があるコマンドを利用します。

$ pwd
PROJECT_PATH
$ yarn lerna run dev --scope nuxt

lerna notice cli v5.1.4
lerna notice filter including "nuxt"
lerna info filter [ 'nuxt' ]
> nuxt:dev
$ nuxt dev
Nuxt CLI v3.0.0-rc.4
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.100.100:3000/
ℹ Vite server warmed up in 123ms
ℹ Vite client warmed up in 1118ms
✔ Vite server built in 651ms
✔ Nitro built in 363 ms

ブラウザで表示されたlocalhost:3000に遷移して、以下が表示されれば起動確認は完了です。

lernaの依存状態を確認

nx graphを利用して追加したnuxtの記載がある確認します

$ yarn nx grtaph

終わりに

もっと綺麗な形で追加方法があるはず。。。
CI系統の設定ができればいろいろいけるはず。。。

lerna nx Nuxt3のmonorepoとりあえず環境を作成する