【问题标题】:Setting correct paths when configuring http server with npm and grunt for OpenUI5使用 npm 和 grunt 为 OpenUI5 配置 http 服务器时设置正确的路径
【发布时间】:2019-06-19 09:33:42
【问题描述】:

我正在尝试使用 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

在当前目录布局中?

【问题讨论】:

    标签: node.js npm gruntjs sapui5


    【解决方案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,请查看 Openui5 示例应用程序的legacy-grunt-and-bower-setup branch 并使用此处的 Gruntfile/bower.json/package.json。

    【讨论】:

      猜你喜欢
      • 2014-11-13
      • 1970-01-01
      • 1970-01-01
      • 2011-04-19
      • 1970-01-01
      • 2012-05-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多