【SAP UI5】package.jsonとpackage-lock.jsonのまとめ

概要

受託開発企業で働くfussasyといいます。普段は、SAP BTP（PaaS）上でSAP Fioriアプリケーション開発をしています。SAP UI5でFioriアプリケーションを開発する際、package.jsonはよく目にするかと思います。何かと知らず知らずのまま開発していることも多いですが、基本的な情報整理を行い理解を深めておきたいと思います。

package.jsonとは

package.jsonは、Node.jsプロジェクトの情報を一元管理し、開発効率の向上、共同開発の促進、プロジェクトの公開などをサポートします。ここでは、プロジェクトの依存関係やスクリプト、メタデータなどを定義します。プロジェクトテンプレートから作成した場合、Fiori アプリケーションの package.json と MTA プロジェクトの package.jsonの2種類が見られるかと思いますが、以下のような違いがあります。

Fiori アプリケーションの package.json

Fiori アプリケーションの package.jsonは、主に、SAPUI5 ベースの Fiori アプリケーションの開発、ビルド、テスト、デプロイに必要な情報を記述します。以下、package.json例と各設定項目の解説です。

package.json

{
  "name": "xxxxx_yyyyy_zzzzz",
  "version": "0.0.1",
  "private": true,
  "description": "A Fiori application.",
  "keywords": [
    "ui5",
    "openui5",
    "sapui5"
  ],
  "main": "webapp/index.html",
  "devDependencies": {
    "@sap/ui5-builder-webide-extension": "^1.1.8",
    "@sap/ux-ui5-tooling": "^1.14.0",
    "@ui5/cli": "^3.0.0",
    "mbt": "^1.2.18",
    "ui5-task-zipper": "^0.5.0"
  },
  "scripts": {
    "start": "fiori run --open \"test/flpSandbox.html?sap-ui-xx-viewCache=false#xxxxx-display\"",
    "start-local": "fiori run --config ./ui5-local.yaml --open \"test/flpSandbox.html?sap-ui-xx-viewCache=false#xxxxx-display\"",
    "build": "ui5 build --config=ui5.yaml --clean-dest --dest dist",
    "deploy": "fiori verify",
    "deploy-config": "fiori add deploy-config",
    "start-noflp": "fiori run --open \"index.html?sap-ui-xx-viewCache=false\"",
    "start-variants-management": "fiori run --open \"preview.html?sap-ui-xx-viewCache=false&fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true#preview-app\"",
    "unit-tests": "fiori run --open 'test/unit/unitTests.qunit.html'",
    "int-tests": "fiori run --open 'test/integration/opaTests.qunit.html'",
    "build:cf": "ui5 build preload --clean-dest --config ui5-deploy.yaml --include-task=generateCachebusterInfo"
  },
  "sapuxLayer": "CUSTOMER_BASE",
  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension",
      "ui5-task-zipper",
      "mbt"
    ]
  }
}

• 基本情報
  name: プロジェクト名
  version: プロジェクトのバージョン
  private: true に設定されている場合、このプロジェクトは公開されず、内部でのみ使用されます
  description: プロジェクトの説明
  keywords: プロジェクトに関連するキーワード
  main: アプリケーションのメインのエントリーポイント (通常は index.html)

• 開発依存関係 (devDependencies)
  プロジェクトの開発中に必要なツールやライブラリを指定します。
  @sap/ui5-builder-webide-extension: SAPUI5 アプリケーションのビルドツール WebIDE 拡張
  @sap/ux-ui5-tooling: SAPUI5 アプリケーション開発のための UX ツール
  @ui5/cli: SAPUI5 アプリケーション開発のための CLI (コマンドラインインターフェース)
  mbt: SAPUI5 アプリケーションのテストフレームワーク
  ui5-task-zipper: SAPUI5 アプリケーションのビルド出力の圧縮ツール

• スクリプト (scripts)
  プロジェクトで実行可能なコマンドを定義します。
  start: ローカル開発サーバーを起動し、FLP Sandbox (Fiori Launchpad Sandbox) でアプリケーションを開きます
  start-local: ローカル設定 (ui5-local.yaml) を使用してローカル開発サーバーを起動します
  build: アプリケーションをビルドし、 dist フォルダに出力します
  deploy: アプリケーションのデプロイ準備のために検証を行います
  deploy-config: デプロイ設定を追加します
  start-noflp: FLP Sandbox を使用せずにアプリケーションを起動します
  start-variants-management: バリアント管理モードでアプリケーションを起動します
  unit-tests: ユニットテストを実行します
  int-tests: 結合テストを実行します
  build:cf: Cloud Foundry 環境へのデプロイ用にアプリケーションをビルドします

• その他
  sapuxLayer: SAPUI5 Flexibility レイヤー (カスタマイズの階層) を指定します
  ui5: SAPUI5 固有の設定を定義します
  dependencies: SAPUI5 アプリケーションのビルドに必要な依存関係を指定します

MTA プロジェクトの package.json

MTA プロジェクトの package.jsonは、主に、MTA (Multi-Target Application) プロジェクトのビルドとデプロイに必要な情報を記述します。以下、package.json例と各設定項目の解説です。
※MTA プロジェクト：複数のモジュール（例：DB、フロントエンド、バックエンド）を含むクラウドアプリケーションを効率的に構築・デプロイするための SAP のフレームワーク。

package.json

{
    "name": "mta-project",
    "version": "0.0.1",
    "description": "Build and deployment scripts",
    "scripts": {
        "clean": "rimraf resources mta_archives mta-op*",
        "build": "rimraf resources mta_archives && mbt build --mtar archive",
        "deploy": "cf deploy mta_archives/archive.mtar --retries 1",
        "undeploy": "cf undeploy xxxxx_project --delete-services --delete-service-keys --delete-service-brokers"
    },
    "devDependencies": {
        "mbt": "^1.2.18",
        "rimraf": "^3.0.2"
    }
}

• 基本情報
  name: プロジェクト名 (mta-project)
  version: プロジェクトのバージョン (0.0.1)
  description: プロジェクトの説明 (Build and deployment scripts)

• スクリプト (scripts)
  プロジェクトで実行可能なコマンドを定義します。
  clean: プロジェクトのビルドによって生成されたファイルやフォルダを削除します。具体的には、resources、mta_archives、mta-op* という名前のファイル/フォルダを削除します。rimraf はファイルを削除するためのユーティリティです。
  build: clean スクリプトと同様に、まず生成されたファイル/フォルダを削除します。その後、mbt build コマンドを実行し、MTA プロジェクトをビルドして mta_archives/archive.mtar という名前の MTAR (MTA Archive) ファイルを作成します。
  deploy: cf deploy コマンドを使用して、ビルドされた MTAR ファイル (mta_archives/archive.mtar) を Cloud Foundry 環境にデプロイします。--retries 1 は、デプロイが失敗した場合に1回再試行することを意味します。
  undeploy: cf undeploy コマンドを使用して、pre_crp という名前のアプリケーションを Cloud Foundry 環境からアンデプロイ（削除）します。--delete-services, --delete-service-keys, --delete-service-brokers は、アプリケーションに関連付けられたサービス、サービスキー、サービスブローカーも一緒に削除することを指定します。

• 開発依存関係 (devDependencies)
  プロジェクトの開発中に必要なツールやライブラリを指定します。
  mbt: MTA Build Tool の略で、MTA プロジェクトのビルドを行うためのコマンドラインツールです。
  rimraf: Node.js でファイルを削除するためのパッケージです。

Fiori アプリケーションの package.json と MTA プロジェクトの package.jsonの違いについて

Fiori アプリケーションの package.json と MTA プロジェクトの package.jsonの違いのポイントは以下の通りです。

• Fiori アプリケーションは、単体の Web アプリケーションとして開発・ビルド・デプロイされます。
• MTA プロジェクトは、複数のモジュールを含むクラウドアプリケーションとして、MTA ビルドツール (mbt) を使用してビルド・デプロイされます。
• Fiori アプリケーションも、MTA プロジェクトの一部として含まれる場合があります。その場合は、Fiori アプリケーションの開発・ビルドには Fiori アプリケーション用の package.json を、MTA プロジェクト全体のビルド・デプロイには MTA プロジェクト用の package.json を使用します。

package.jsonとpackage-lock.jsonについて

package.jsonはプロジェクトの基本情報と直接的な依存関係を定義します。package-lock.jsonはプロジェクトが直接・間接的に依存する全てのパッケージとその固定されたバージョンを定義します。違いのポイントは以下の通りです。

• package.json は依存関係のバージョン範囲を指定しますが、package-lock.json はインストールされた正確なバージョンを記録します。
• package-lock.json により、異なる環境や異なるタイミングで npm install を実行しても、同じバージョンのパッケージがインストールされ、プロジェクトの動作の再現性が保証されます。
• package-lock.json は npm install 実行時に自動的に生成・更新されます。
• 基本的に package-lock.json を直接編集する必要はありません。

補足・関連記事