我有下列這段基於 ES6 的 SAP UI5 程式碼，使用 JavaScript 編寫而成：

```javascript
import UIComponent from "sap/ui/core/UIComponent";
/**
 * @namespace ui5.typescript.helloworld
 */
export default class Component extends UIComponent {
    multiply(x, y) {
        return x * y;
    }
}

```
可以看到裡面還是有很多基於 ES6 的語法，比如 class, extends 等關鍵字。

下面我們使用工具將這段程式碼轉換成傳統的 JavaScript 程式碼。

使用下面的命令列新增依賴：

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save-dev @babel/preset-typescript babel-preset-transform-ui5

在 ui5 專案根目錄新建一個檔案 .babelrc.json，這個檔案告訴 babel 需要具體執行的任務。

```typescript
{
    "ignore": [
        "**/*.d.ts"
    ],
    "presets": [
        "transform-ui5",
        "@babel/preset-typescript"
    ]
}
```

使用下面的命令列觸發 babel 構建：

> npx babel src --out-dir webapp --extensions ".ts,.js"

![](https://img-blog.csdnimg.cn/img_convert/0c5c67ca43c636814ef1e23ac1f94624.png)

我們需要明確允許 *.ts 檔案，因為 Babel 預設不處理 TypeScript 檔案。

結果是一個帶有 Component.js 檔案的 webapp 資料夾，該檔案是從 TypeScript 轉換的，也轉換為經典的 UI5 程式碼。

開啟這個檔案可以看到：模組匯入被經典的 sap.ui.define(...) 替換，“Component”類現在透過呼叫 UIComponent.extend(...) 來定義：

![](https://img-blog.csdnimg.cn/img_convert/ab2a835cc644b189df7dc3b267243d8e.png)

```javascript
sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
  /**
   * @namespace ui5.typescript.helloworld
   */
  const Component = UIComponent.extend("ui5.typescript.helloworld.Component", {
    multiply: function _multiply(x, y) {
      return x * y;
    }
  });
  return Component;
});
```

雖然不是嚴格要求，但使用 linter 檢查我們的程式碼是有意義的。 當新增一些外掛時，流行的“ESLint”工具也能理解 TypeScript。 它是 lint TypeScript 程式碼的推薦工具。

所以讓我們新增 ESLint 和這些外掛作為開發依賴。

> npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

ESLint 需要被告知要使用哪些外掛以及程式碼應該具有哪種 JavaScript 語言級別，因此在專案根目錄中使用以下設定建立一個 .eslintrc.json 檔案：

```typescript
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": ["./tsconfig.json"],
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ]
}
```

現在可以執行命令列 npx eslint 來進行語法檢查了：

npx eslint

這裡不應該有任何輸出（這意味著：沒有錯誤），但是如果我們向 Component.ts 引入語法錯誤，則檢查將報錯，例如 缺少“乘法”函式的返回型別，它將顯示警告。

現在我們可以在 src 資料夾裡進行基於 TypeScript 的 SAP UI5 的開發了。

- npx tsc

- npx babel src --out-dir webapp --extensions ".ts,.js"

![](https://img-blog.csdnimg.cn/img_convert/e9fa4f169c98504513565f0a0cee1dae.png)

最後安裝 SAP UI5 cli 工具來部署和啟動這個 SAP UI5 應用：

npm install --save-dev @ui5/cli

新建一個 ui5.yaml 檔案，維護如下內容：

![](https://img-blog.csdnimg.cn/img_convert/e03262f2b3ed1b67b2a2606fc81ccac7.png)

```yaml
specVersion: "2.3"
metadata:
  name: ui5.typescript.helloworld
type: application
framework:
  name: OpenUI5
  version: "1.97.0"
  libraries:
    - name: sap.m
    - name: sap.ui.core
    - name: sap.ui.unified
    - name: themelib_sap_fiori_3
```

進行最終的構建：

> npx babel src --out-dir webapp --source-maps true --extensions \".ts,.js\" --copy-files

> npx ui5 serve -o index.html

稍稍解釋一下 npx babel 命令的一些引數。

--source-maps true：將原始 TypeScript 原始碼新增到轉譯的 JavaScript 檔案旁邊的 *.js.map 檔案中，並將指向這些 .map 檔案的指標新增到 JS 檔案的末尾。 瀏覽器瞭解這一點，因此即使它們實際上在後臺執行已編譯的 JavaScript 程式碼，它們也可以在偵錯程式中啟用對原始 TypeScript 程式碼的單步執行。 請注意，這描述了 webapp 目錄中的轉譯輸出； 最佳化 UI5 構建到 dist 目錄中刪除了這些源對映。

--copy-files 確保非 TypeScript 檔案也從“src”複製到“webapp”，例如 檢視 XML 檔案。

成功啟動：

![](https://img-blog.csdnimg.cn/img_convert/96d20d95a1e6a064e02d131eb45d0f84.png)

使用 Babel 將基於 ES6 的 SAP UI5 的程式碼轉譯成傳統 JavaScript 程式碼

相關文章