TypeScript自習 2日目「ビルド」

元のコードをindex.tsにコピーしてビルドする。

index.ts

index.tsに元のコードをコピーする。
外部のモジュールを読み込むようにして、コンパイル〜ビルドが通るような最低限の修正をする。

import {Button} from '@kintone/kintone-ui-component/esm/js'; // モジュール読み込み
(() => {
 kintone.events.on('app.record.detail.show', function(event) {
   new kintone.Promise(function(resolve, reject) {
     // let button = new kintoneUIComponent.Button({text: '印刷'});
     let button = new Button({text: '印刷'});
     let elPrintButton = kintone.app.record.getSpaceElement('printButton');
     elPrintButton.appendChild(button.render());
     resolve(button);
     return;
   })
   .then(function (UiButton) {
     console.log(UiButton);
     let url = kintone.api.url('/k/v1/records', true);
     console.log(url);
     let reg = /http(s)?:\/\/([\w-]+\.)+([\w-]+)+\/([\w-]+)/;
     console.log(url.match(reg));
     let appId = kintone.app.getId();
     console.log(appId);
     let body = {'id': appId};
     kintone.api(kintone.api.url('/k/v1/app', true), 'GET', body, function(resp) {
       // success
       console.log(resp);
       let printURL = url.match(reg)[0] + '/' + resp.appId + '/print?record=' + event.recordId;
       console.log(printURL);
       UiButton.on('click', function(event) {
         console.log('on click');
         console.log(printURL);
         window.open(printURL, null);
       });
     });
   });
 });
})();

ビルド

kintone-cli build にて、実行ファイルをビルドする。
コンパイルからビルドまで自動で実行される。

$ kintone-cli build --app-name 166 

kintoneのテスト環境にて生成されたファイルをアップロードし、動作を確認する。
※ビルドされたファイルは、distディレクトリ下に生成される。

├── dist
│   └── 166.min.js