node.js - 使用 npm 和 grunt 为 OpenUI5 配置 http 服务器时设置正确的路径

Question

我正在尝试使用 Node.js 设置 http 服务器以使用 OpenUI5。我的试验基于

中找到的文章

https://www.newventuresoftware.com/blog/developing-sapui5-applications-with-visual-studio-code

我的问题是正确设置所涉及的不同文件中的路径。执行时

npm run start

在目录

/var/www/html/p1

浏览器控制台中出现以下错误消息:

2019-01-25 12:54:44 Device API logging initialized - DEVICE Device.js:85:22
2019-01-25 12:54:44.940000 Changing log level to DEBUG -  sap.base.log Log.js:412:41
2019-01-25 12:54:44.940000 SAP Logger started. -  Log.js:412:41
2019-01-25 12:54:44.941000 URL prefixes set to: -  sap.ui.ModuleSystem Log.js:412:41
2019-01-25 12:54:44.941000   (default) : node_modules/@openui5/sap.ui.core/src/ -  sap.ui.ModuleSystem Log.js:412:41
2019-01-25 12:54:44.941000   'myapp' : ./ -  sap.ui.ModuleSystem Log.js:412:41
2019-01-25 12:54:45.333000 Creating Core -  sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.338000   theme = sap_belize -  Log.js:412:41
2019-01-25 12:54:45.338000   modules = sap.m.library -  Log.js:412:41
2019-01-25 12:54:45.338000   bindingSyntax = complex -  Log.js:412:41
2019-01-25 12:54:45.338000   frameOptions = allow -  Log.js:412:41
2019-01-25 12:54:45.338000   xx-supportedLanguages =  -  Log.js:412:41
2019-01-25 12:54:45.338000   xx-fiori2Adaptation = false -  Log.js:412:41
2019-01-25 12:54:45.340000 Declared modules: sap.ui.core.library,sap.m.library - sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.340000 Declared theme sap_belize -  sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.340000 Content direction set to 'ltr' -  sap.ui.core.Core Log.js:412:41
2019-01-25 12:54:45.340000 Browser-Id: ff64 -  sap.ui.core.Core Log.js:413:43
2019-01-25 12:54:45.341000 Sync point 'UI5 Document Ready' created -  Log.js:412:41
2019-01-25 12:54:45.341000 Sync point 'UI5 Core Preloads and Bootstrap Script' created -  Log.js:412:41
2019-01-25 12:54:45.342000 Sync point 'UI5 Core Preloads and Bootstrap Script' finished (tasks:2, open:0, failures:0) -  Log.js:412:41
2019-01-25 12:54:45.343000 Modules and libraries declared via bootstrap-configuration are loaded synchronously. Set preload configuration to 'async' or switch to asynchronous bootstrap to prevent these requests. - SyncXHR Log.js:411:29
2019-01-25 12:54:45.347000 Analyzing Library sap.ui.core -  sap.ui.core.Core.initLibrary() Log.js:413:43
2019-01-25 12:54:45.350000 Including node_modules/@openui5/sap.ui.core/src/sap/ui/core/themes/sap_belize/library.css -  sap.ui.core.Core.includeLibraryTheme() -  Log.js:412:41
Error: failed to load 'sap/m/library.js' from node_modules/@openui5/sap.ui.core/src/sap/m/library.js: 404 - Not Found

找不到文件位于

./node_modules/@openui5/sap.m/src/sap/m/library.js

目录树:

/var/www/html/p1/
├── Gruntfile.js
├── index.html
├── node_modules
│   ├── abbrev
...
│   ├── @openui5
│   │   ├── sap.m
│   │   ├── sap.ui.core
│   │   ├── sap.ui.layout
│   │   ├── sap.ui.unified
│   │   └── themelib_sap_belize
...
│   └── yargs
│       ├── CHANGELOG.md
│       ├── completion.sh.hbs
│       ├── index.js
│       ├── lib
│       ├── LICENSE
│       ├── node_modules
│       ├── package.json
│       └── README.md
├── package.json
└── package-lock.json

404 directories, 1762 files

package.json:

{
  "name": "P1",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "dependencies": {
    "@openui5/sap.m": "^1.60.0",
    "@openui5/sap.ui.core": "^1.60.0",
    "@openui5/sap.ui.layout": "^1.60.0",
    "@openui5/themelib_sap_belize": "^1.60.0"
  },
  "devDependencies": {
    "grunt": "^1.0.2",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-openui5": "^0.13.0"
  },
  "scripts": {
    "start": "grunt serve",
    "build": "grunt build"
  },
  "author": "",
  "license": "ISC"
}

Gruntfile.js:

'use strict';

module.exports = function(grunt) {

  grunt.initConfig({

    connect: {
      options: {
        port: 8080,
        hostname: '*'
      },
      src: {},
      dist: {}
    },

    openui5_connect: {
      options: {
        resources: [
          'node_modules/@openui5',
        ],
        testresources: [
          'node_modules/@openui5',
        ]
      },
      src: {
        options: {
          appresources: '.'
        }
      },
      dist: {
        options: {
          appresources: '.'
        }
      }
    },

    openui5_preload: {
        component: {
            options: {
                resources: {
                    cwd: 'node_modules/@openui5',
                    prefix: 'myapp',
                    src: [
                        '**/*.js',
                        '**/*.fragment.html',
                        '**/*.fragment.json',
                        '**/*.fragment.xml',
                        '**/*.view.html',
                        '**/*.view.json',
                        '**/*.view.xml',
                        '**/*.properties',
                        'manifest.json',
                        '!test/**'
                    ]
                },
                dest: 'dist'
            },
            components: true
        }
    },

    clean: {
        dist: 'dist',
        coverage: 'coverage'
    },

    copy: {
        dist: {
            files: [ {
                expand: true,
                cwd: '.',
                src: [
                    '**',
                    '!test/**'
                ],
                dest: 'dist'
            } ]
        }
    },

    eslint: {
        webapp: ['.']
    }

  });

  // These plugins provide necessary tasks.
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-openui5');

  // Server task
  grunt.registerTask('serve', function(target) {
      grunt.task.run('openui5_connect:' + (target || 'src') + ':keepalive');
  });

  // Build task
  grunt.registerTask('build', ['clean:dist', 'openui5_preload', 'copy']);

  // Default task
  grunt.registerTask('default', ['serve']);

};

index.html:

<!DOCTYPE html>
<html>

  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>My Hello World App</title>

  <script src="node_modules/@openui5/sap.ui.core/src/sap-ui-core.js"
    id="sap-ui-bootstrap"
    data-sap-ui-theme="sap_belize"
    data-sap-ui-libs="sap.m"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-resourceroots='{"myapp": "./"}'>
  </script>

  </head>

  <body class="sapUiBody" id="content">
  Hallo
  </body>

</html>

需要进行哪些更改才能使服务器找到该文件

library.js

在当前目录布局中？

Answer 1

您仍在使用 grunt 而不是新的 UI5 Build Tooling 有什么硬性原因吗？ ？

看看 Openui5 Sample App如何使用它。

在您的情况下，您应该将 index.html 放入 webapp 文件夹中，将引导设置为

<script src="resources/sap-ui-core.js"

并使用以下package.json

{
  "name": "P1",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "dependencies": {
    "@openui5/sap.m": "^1.60.0",
    "@openui5/sap.ui.core": "^1.60.0",
    "@openui5/sap.ui.layout": "^1.60.0",
    "@openui5/themelib_sap_belize": "^1.60.0"
  },
  "devDependencies": {
    "@ui5/cli": "^1.0.0",
    "eslint": "^4.19.1",
    "karma": "^3.1.3",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.2",
    "karma-openui5": "^0.2.3",
    "karma-qunit": "^1.2.1",
    "qunitjs": "^2.4.1",
    "rimraf": "^2.6.2",
    "start-server-and-test": "^1.4.1"
  },
  "scripts": {
    "start": "ui5 serve",
    "lint": "eslint webapp",
    "karma": "karma start",
    "karma-ci": "karma start karma-ci.conf.js",
    "watch": "start-server-and-test start http://localhost:8080 karma",
    "test": "npm run lint && rimraf coverage && start-server-and-test start http://localhost:8080 karma-ci",
    "build": "rimraf dist && ui5 build --a"
  },
  "author": "",
  "license": "ISC"
}

然后运行npm install，然后运行ui5 init一次。之后使用 npm start

启动您的应用程序

如果你真的想坚持使用 grunt，请查看 legacy-grunt-and-bower-setup branch Openui5 示例应用程序的并使用此处的 Gruntfile/bower.json/package.json。