【UI5】ローカル、BAS環境でカスタムライブラリを使用するには

9356 ワード
SAP SAPUI5 BusinessApplicationStudio SAP テキストリンク

はじめに

UI5 Toolingを使うと、VS Codeなどのローカル環境でUI5の開発ができます。UI5の開発ではカスタムライブラリを使うことも多いですが、ローカル環境でカスタムライブラリを使用するにはどうしたらよいでしょうか？　同じ課題はBusiness Application Studio（BAS）にもあって、以下の質問も出ていますが解決に至っていません。

WebIDEの場合、同じワークスペースにライブラリをインポートしておけば簡単にライブラリを参照することができました。方法については以下の記事で説明されています。
SAPUI5アプリで再利用可能なライブラリを作る（ABAPリポジトリ）

試行錯誤の結果、以下の方法にたどりついたので紹介します。
デプロイ前に調整が必要なのでベストな方法とは言えませんが、とりいそぎ。

2021/4/6
SAP Communityのブログに以下の記事を投稿しました。こちらの方法のほうがいいと思います。
How to consume UI5 custom libraries in BAS or VS Code

ステップ

前提：ライブラリのソースはGitで管理されていること

以下のような構成のプロジェクトを使用します。

1. webapp配下にライブラリ用のフォルダlibsを作成


libsフォルダは本体のアプリのGitで管理しないので、.gitignoreに入れておきます。

なお、webappフォルダ以外のところにライブラリを置くと、ライブラリのパスを読み込むことができませんでした。

2. libsフォルダにライブラリのソースをクローン

Gitリポジトリからライブラリのソースをクローンします。

3. ui5.yamlの設定

libsフォルダがデプロイ対象にならないように、ui5.yamlに以下の設定を追加します。参考

builder:
  resources:
    excludes:
      - "/libs/**"

4. manifest.jsonにresourceRootsを追加

  "sap.ui5": {
    ...
    "dependencies": {
      "minUI5Version": "1.60.1",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {}    
      }
    },
    "resourceRoots": {
      "demo.library-template": "./libs/library-template/src/demo/library-template" 
    },

通常は"libs"セクションに使用するライブラリを追加しますが、ローカルまたはBASだと色々なエラーが出てしまったのでこの時点では追加しません。

5. ライブラリを使用する

以上の設定で、ライブラリを使用できるようになります。
以下はコントローラーでの使用例です。

sap.ui.define([
  "com/myorg/checkbox/controller/BaseController",
  "sap/ui/model/json/JSONModel",
  "demo/library-template/function/Hello"
], function(Controller, JSONModel, Hello) 

  return Controller.extend("com.myorg.checkbox.controller.MainView", {
        onInit: function () {
            var sText = sap.ui.getCore().getLibraryResourceBundle("demo.library-template").getText("ANY_TEXT");
            console.log(sText);
            Hello.sayHello();
        },

6. デプロイする前に

ABAPサーバにデプロイする前に、manifest.jsonの調整が必要です。
dependencyにライブラリを追加し、resourceRootsは削除します。

  "sap.ui5": {
    ...
    "dependencies": {
      "minUI5Version": "1.60.1",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {},
        "demo.library-template": {}
      }
    }

おわりに

一応ローカル環境でライブラリが使えるようになりました。少なくともBASは今後、正式な手順が示されることを期待します。また、もっといい方法をご存じの方がいましたら教えてください。