我有以下用JavaScript编写的基于ES6的SAPUI5代码：importUIComponentfrom"sap/ui/core/UIComponent";/***@namespaceui5.typescript.helloworld*/导出默认类ComponentextendsUIComponent{multiply(x,y){returnx*y;可以看到还是有很多基于ES6的语法，比如class，extends等关键字。接下来我们使用工具将这段代码转换成传统的JavaScript代码。使用如下命令行添加依赖：npminstall--save-dev@babel/core@babel/cli@babel/preset-envnpminstall--save-dev@babel/preset-typescriptbabel-preset-transform-ui5中ui5在项目根目录新建一个文件.babelrc.json。这个文件告诉babel要执行的具体任务。{"ignore":["**/*.d.ts"],"presets":["transform-ui5","@babel/preset-typescript"]}使用以下命令行触发babel构建：npxbabelsrc--out-dirwebapp--extensions".ts,.js"我们需要明确允许*.ts文件，因为Babel默认不处理TypeScript文件。结果是一个webapp文件夹，其中包含一个从TypeScript转换为经典UI5代码的Component.js文件。打开这个文件可以看到：模块导入被经典的sap.ui.define(...)代替，“Component”类现在通过调用UIComponent.extend(...)来定义：sap.ui。define(["sap/ui/core/UIComponent"],function(UIComponent){/***@namespaceui5.typescript.helloworld*/constComponent=UIComponent.extend("ui5.typescript.helloworld.Component",{multiply:function_multiply(x,y){returnx*y;}});返回组件;});虽然不是严格要求，但用linter检查我们的代码是有意义的。添加一些插件后，流行的“ESLint”工具也可以理解TypeScript。它是用于检查TypeScript代码的推荐工具。所以让我们添加ESLint和这些插件作为开发依赖。npminstall--save-deveslint@typescript-eslint/parser@typescript-eslint/eslint-pluginESLint需要被告知要使用哪些插件以及代码应该具有哪个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"]}现在可以执行命令行npxeslint进行语法检查：npxeslint在这里应该没有输出（意思是：没有错误），但是如果我们向Component.ts引入语法错误，检查会报错，比如“multiply”函数缺少返回类型，它会显示警告。现在我们可以在src文件夹中开发基于TypeScript的SAPUI5。npxtscnpxbabelsrc--out-dirwebapp--extensions".ts,.js"最后安装SAPUI5cli工具来部署启动SAPUI5应用：npminstall--save-dev@ui5/cli创建一个新的用户界面5。yaml文件，维护以下内容：specVersion:"2.3"metadata:name:ui5.typescript.helloworldtype:applicationframework:name:OpenUI5version:"1.97.0"libraries:-name:sap.m-name:sap.ui.核心-名称：sap.ui.unified-名称：themelib_sap_fiori_3用于最终构建：npxbabelsrc--out-dirwebapp--source-mapstrue--extensions\".ts,.js\"--copy-filesnpxui5serve-oindex.html稍微解释一下npxbabel命令的一些参数。--source-mapstrue：将原始TypeScript源代码添加到转译后的JavaScript文件旁边的*.js.map文件中，并将指向这些.map文件的指针添加到JS文件的末尾。浏览器了解这一点，因此它们可以在调试器中启用单步执行原始TypeScript代码，即使它们实际上是在后台运行已编译的JavaScript代码。请注意，这描述了webapp目录中的翻译输出；将UI5构建到dist目录中进行优化会删除这些源映射。--copy-files确保非TypeScript文件也从“src”复制到“webapp”，例如查看XML文件。上线成功：更多Jerry原创文章在此：《王子熙》：
