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

【问题标题】：Can I use webpack with openUI5?我可以将 webpack 与 openUI5 一起使用吗？
【发布时间】：2016-04-26 07:57:40
【问题描述】：

我可以在 openUI5 项目中使用 webpack 及其捆绑功能吗？怎么样？

我知道openui5_preload 和gulp-ui5-preload，但我想要的不仅仅是将所有我的代码放在一个预加载器文件中：我还喜欢“遍历”所有使用过的关联并捆绑我的整个 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 文件。为什么？

【问题讨论】：

标签： webpack sapui5 ui5-tooling

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我刚刚遇到一个presentation from UI5Con 提到OpenUI5 Webpack support。

你安装它： 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/**",
        },
      }
    ]),
  ]
}

【讨论】：