使用 Babel 将基于 ES6 的 SAP UI5 的代码转译成传统 JavaScript 代码

2022-02-15 20:00:44 阅读：185 来源： 互联网

标签：ES6 typescript -- babel 代码 TypeScript ui5 eslint Babel

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

标签：ES6,typescript,--,babel,代码,TypeScript,ui5,eslint,Babel
来源： https://www.cnblogs.com/sap-jerry/p/15897936.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用 Babel 将基于 ES6 的 SAP UI5 的代码转译成传统 JavaScript 代码