フロントエンドのフォルダ構成をnpm workspacesを導入したものに変更する

[KentaHizume]

概要

• Dressca管理アプリを作成する #1453

においてアプリを追加するにあたって、
npm workspaceを用いて、2つのワークスペースに分割してアプリを管理する。

そのために、現行のDresscaアプリを下記の通りcustomerフォルダ配下に移動する。
ただし、lint系の共通化して問題ない設定ファイルについてはdressca-frontend直下に配置する。

あわせて、ドキュメントの影響箇所を特定し、修正する。

詳細

実装

ワークスペース名

• dressca-frontend/customer（現行のto C向けECサイトDressca）
• dressca-frontend/admin（新規作成する管理用アプリ）

CI

• dressca-frontend
  consumerワークスペースを対象に実行するよう変更
  名称をconsumerが対象とわかるように変更

• openapi-generatorのチェック
  作成するissueのタイトルにアプリ名を入れるように修正

共通化対象

• .eslintrc.cjs ⇒ extendする
• .stylelintrc.js ⇒ extendする
• .prettierrc.json ⇒ 再帰的に探すので、dressca-frontend直下に配置
• .editorconfig ⇒ 再帰的に探すので、dressca-frontend直下に配置

ドキュメント

新規

• http://127.0.0.1:8000/guidebooks/how-to-develop/vue-js/setting-workspaces/
  ワークスペースに関する設定で、初期設定から変更すべき点を記載

変更

• http://127.0.0.1:8000/guidebooks/how-to-develop/vue-js/create-vuejs-blank-project/
  npm workspacesを用いたプロジェクトの構造について説明を追加、
  初期化に使用するコマンドを変更
• http://127.0.0.1:8000/guidebooks/how-to-develop/vue-js/folder-structure-of-blank-project/
  フォルダ構造の変更を反映
• http://127.0.0.1:8000/guidebooks/how-to-develop/vue-js/static-verification-and-format/
  ルートプロジェクトへの設定ファイルの配置について説明を追加
• http://127.0.0.1:8000/guidebooks/how-to-develop/vue-js/create-api-client-code/
  API仕様書の相対パスの変更を反映
• http://127.0.0.1:8000/guidebooks/how-to-develop/publication/
  package.jsonのスクリプトとプロジェクトファイルのプロパティの変更を反映
• http://127.0.0.1:8000/guidebooks/how-to-develop/dotnet/configure-asp-net-core-with-vite-project/
  フォルダの配置図についてフロントエンド側を変更、プロパティ、コマンドの変更を反映

完了条件

• 変更前後でアプリが問題なく動作すること
• 変更前後でCIパイプラインが問題なく動作すること
• 変更前後でdependabotが問題なく動作すること
• 共通化可能な設定ファイルが共通化されていること
• Vue.js編のガイドを手順通り実行した際のフォルダ構造が、サンプルと一致すること

[KentaHizume]

.eslintrc.cjsとstylelintrc.js

dressca-frontend直下にnode/modulesがないと読み込めずにエラーになってしまう。

Error: Cannot read config file: maris\samples\Dressca\dressca-frontend\.eslintrc.cjs
Error: Cannot find module '@rushstack/eslint-patch/modern-module-resolution'

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'maris\samples\Dressca\dressca-frontend\.stylelintrc.js'

[KentaHizume]

なぜか古いパッケージを取得してくる現象が発生している。
⇒一度下記のパッケージをnpm uninstall してから再度 npm installすると改善した。
キャッシュが悪さをしている？

maris\samples\Dressca\dressca-frontend> npm install
npm WARN deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated @humanwhocodes/[email protected]: Use @eslint/config-array instead
npm WARN deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated @humanwhocodes/[email protected]: Use @eslint/object-schema instead

一度既存dresscaのpackage-lock.jsonを削除してからnpm installしたのがよくなかったらしい。
npm installしてしまうとチルダ等でバージョン指定している箇所が勝手にアップデートされるので、
package-lock.jsonの中身が既存のアプリと変わってしまう。

1. package-lock.jsonをcustomer配下に置いたままで、dressca-frontend直下でnpm ciする
2. customerのpackage-lock.jsonを削除
3. dressca-frontend直下でnpm installする（変化なし）
   で解決した。

[KentaHizume]

アプリケーションの発行について動作確認

https://maris.alesinfiny.org/guidebooks/how-to-develop/publication/#top
・上記の手順で発行できること
・既存のDresscaでの発行時と出物のファイル数が同じこと
を確認

https://github.com/AlesInfiny/maris/tree/test/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%99%BA%E8%A1%8C%E3%81%AE%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D

• 特に問題なく発行できるが、Includeするフォルダパスを変える必要がある。
• そのため、PropertyGroupに(SpaWorkspace)などを定義しておいたほうがよい。
• SpaRootを......\dressca-frontend\customerにしてしまう案もあるが、
  npm workspaces側のルートのpacakege.jsonとルートの意味が異なってしまうので微妙か

    <ItemGroup>
      <DistFiles Include="$(SpaRoot)\customer\dist\**; $(SpaRoot)\customer\dist-server\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>

[KentaHizume]

• create-<initializer>という命名規則でnpmパッケージが公開されていると一行でワークスペースの作成と初期化ができる。

https://docs.npmjs.com/cli/v10/commands/npm-init

npm init -w package-name vue@latest .

Vue.js - The Progressive JavaScript Framework

√ Package name: ... package-name
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » Cypress
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in ...

Done. Now run:

  npm install
  npm run format
  npm run dev

[KentaHizume]

ルートのpackage.jsonの"type": "module"は現状必須（ESM/CJSの区別がつかなくて落ちる）
順番としてもlint実行の前にやっておかないといけない
CJSを使っている設定ファイルがなくなったら恐らく追加しなくても動くようになるはず

(node:30216) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.