乐趣区

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

jiezi

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

退出移动版