webpack - 我可以将 webpack 与 openUI5 一起使用吗？

Question

我可以在 openUI5 项目中使用 webpack 及其捆绑功能吗？如何？

我知道，openui5_preload但gulp-ui5-preload我想要的不仅仅是将我的所有代码放在一个预加载器文件中：我也喜欢“遍历”所有使用的 dedendencies，并将我的整个 openUI5 项目捆绑在一个文件中。

到目前为止，我能够使用 UI5 运行 webpack：

npm i -g webpack

webpack.config.js：

module.exports = {
  entry: {
    packed: './webapp/Component.js'
  },
  output: {
    path: './built',
    filename: '[name].built.js'
  },
  resolve: {
    modulesDirectories: [
      'node_modules',
      'bower_components'
    ]
  }
};

并运行webpack一个文件built/packed.built.js被创建。但它只包含我的 component.js 文件。为什么？

Answer 1

UI5 使用自己的 CommonJS 和 AMD: jQuery.sap.require()/的实现/修改，jQuery.sap.declare()以及更新的现在推荐的 AMD sap.ui.require()/ sap.ui.declare()。

Webpacks 依赖行走支持 CommonJS 和 AMD ( 1 )。但我猜它不理解 UI5 模块。没有它，它就无法提取每个模块的依赖关系。所以它卡在你的 Component.js 上......

Answer 2

我刚刚看到来自 UI5Con 的一个演示文稿，其中提到了 OpenUI5 Webpack 支持。

你安装它： npm install --save-dev openui5-webpack-plugin

从项目文档中获取的示例配置：

const OpenUI5Plugin = require("openui5-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  resolve: {
    modules: [
      "node_modules/@openui5/sap.m/src",
      "node_modules/@openui5/sap.ui.core/src",
      "node_modules/@openui5/sap.ui.core/src/sap/ui/thirdparty",
      "node_modules/@openui5/themelib_sap_belize/src",
      "node_modules"
    ],
  },
  plugins: [
    new OpenUI5Plugin({
      modulePath: 'my/resource/module/path',
      libs: ['sap.ui.core', 'sap.m'],
      translations: ['en', 'de'],
      theme: ['sap_belize'],
      requireSync: [],
      manifest: "./manifest.json"
    }),
    new CopyWebpackPlugin([
      {
        context: path.resolve(__dirname, "node_modules/@openui5/sap.ui.core/src"),
        from: {
          glob: "sap/ui/core/themes/base/fonts/**",
        },
      },
      {
        context: path.resolve(__dirname, "node_modules/@openui5/themelib_sap_belize/src"),
        from: {
          glob: "sap/ui/core/themes/sap_belize_plus/fonts/**",
        },
      }
    ]),
  ]
}