使用 Babel 將基於 ES6 的 SAP UI5 的程式碼轉譯成傳統 JavaScript 程式碼
我有下列這段基於 ES6 的 SAP UI5 程式碼,使用 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 需要具體執行的任務。
{ "ignore": [ "**/*.d.ts" ], "presets": [ "transform-ui5", "@babel/preset-typescript" ] }
使用下面的命令列觸發 babel 構建:
npx babel src --out-dir webapp --extensions ".ts,.js"
我們需要明確允許 *.ts 檔案,因為 Babel 預設不處理 TypeScript 檔案。
結果是一個帶有 Component.js 檔案的 webapp 資料夾,該檔案是從 TypeScript 轉換的,也轉換為經典的 UI5 程式碼。
開啟這個檔案可以看到:模組匯入被經典的 sap.ui.define(...) 替換,“Component”類現在通過呼叫 UIComponent.extend(...) 來定義:
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 檔案:
{
"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"
最後安裝 SAP UI5 cli 工具來部署和啟動這個 SAP UI5 應用:
npm install --save-dev @ui5/cli
新建一個 ui5.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 檔案。
成功啟動:
更多Jerry的原創文章,盡在:"汪子熙":