我有下列这段基于 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的原创文章,尽在:"汪子熙":