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

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

- [Is Business Application Studio support SAPUI5 Application with SAPUI5 Library](https://answers.sap.com/questions/13129136/is-business-application-studio-support-sapui5-appl.html)
- [Is there a way to consume custom UI5 library from SAP Business Application Studio?](https://answers.sap.com/questions/13138648/is-there-a-way-to-consume-custom-ui5-library-from.html)

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

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

2021/4/6
SAP Communityのブログに以下の記事を投稿しました。こちらの方法のほうがいいと思います。
[How to consume UI5 custom libraries in BAS or VS Code](https://blogs.sap.com/2021/04/06/how-to-consume-ui5-custom-libraries-in-bas-or-vs-code/)

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

以下のような構成のプロジェクトを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e2a4d163-b445-c2c5-a59a-7e76469cb362.png)

###1. webapp配下にライブラリ用のフォルダlibsを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/bf931e59-671b-015e-af4a-846d51dbc64e.png)
libsフォルダは本体のアプリのGitで管理しないので、.gitignoreに入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a0b79720-909b-2606-cf26-fe7b0022a7eb.png)
なお、webappフォルダ以外のところにライブラリを置くと、ライブラリのパスを読み込むことができませんでした。

###2. libsフォルダにライブラリのソースをクローン
Gitリポジトリからライブラリのソースをクローンします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/65032b3d-c5c5-a90f-3595-1fbb4810a85f.png)

###3. ui5.yamlの設定
libsフォルダがデプロイ対象にならないように、ui5.yamlに以下の設定を追加します。[参考](https://sap.github.io/ui5-tooling/pages/Configuration/#build-resources)

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

###4. manifest.jsonにresourceRootsを追加

```json
  "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だと色々なエラーが出てしまったのでこの時点では追加しません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/693b80a9-c13e-6431-8b94-1a428a28da52.png)

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

```javascript
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は削除します。

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

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