ui5-typescript 项目启动与配置教程

2025-04-27 11:33:00作者：冯梦姬Eddie

1. 项目目录结构及介绍

ui5-typescript 项目是基于 TypeScript 的 SAP UI5 开源项目。以下是对项目目录结构的简要介绍：

src/：源代码目录，包含所有的 TypeScript 文件。
- components/：存放 UI5 组件的目录。
- controls/：存放自定义控件（controls）的目录。
- models/：存放模型（models）的目录。
- views/：存放视图（views）的目录。
- Router.ts：定义应用的路由配置。
- App.ts：应用的入口文件，定义应用的根组件。
webapp/：Web 应用目录，包含 HTML、CSS 和 JavaScript 文件。
- index.html：应用的入口 HTML 文件。
- css/：存放样式文件的目录。
- js/：存放 JavaScript 文件的目录。
test/：测试目录，包含所有的测试文件。
tsconfig.json：TypeScript 配置文件。
package.json：项目依赖和脚本配置文件。
README.md：项目说明文件。

2. 项目的启动文件介绍

项目的启动文件为 webapp/index.html，以下是该文件的简要介绍：

<!DOCTYPE HTML>
<html>
<head>
    <title>ui5-typescript</title>
    <!-- 引入 SAP UI5 的核心库 -->
    <script
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.m,sap.ui.layout"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-preload="async"
    ></script>

    <!-- 引入项目的主要 JavaScript 文件 -->
    <script src="js/app.js"></script>
</head>
<body class="sapUiBody" id="content">
    <!-- 应用的根组件将被插入这里 -->
</body>
</html>

此文件定义了应用的 HTML 结构，并引入了 SAP UI5 的核心库以及项目的主要 JavaScript 文件。

3. 项目的配置文件介绍

项目的配置文件主要包括 tsconfig.json 和 package.json。

`tsconfig.json`

tsconfig.json 是 TypeScript 的配置文件，用于指定 TypeScript 编译器的选项。以下是一个基本的配置示例：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

`package.json`

package.json 文件包含了项目的依赖和脚本配置。以下是一些基本的项目配置：

{
  "name": "ui5-typescript",
  "version": "1.0.0",
  "description": "SAP UI5 project using TypeScript",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "build": "tsc"
  },
  "dependencies": {
    "typescript": "^4.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  }
}