Проблема с объединением миграции Webpack для приложения J2EE с устаревшими JS библиотеками, то есть YUI2 и Spring-JS / DOJO

Question

Я пытаюсь изменить стратегию связывания для устаревшего приложения, которое в настоящее время использует связывание JAWR, на webpack для ресурсов Javascript / CSS.

Устаревшее приложение использует несколько устаревших JS фреймворков / библиотек, например ,

YUI2, Spring- js + Dojo

Вот моя конфигурация веб-пакета, которая создает отдельный пакет, т.е. один для ресурсов YUI2, Spring / Dojo и других приложений javascript.

webpack.config. js

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');

module.exports = (env, argv) => ({
  entry: {

    'yui.css': ['multi-entry-loader?include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/menu/menu.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/menu/menu-skin.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/container/container.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/datatable/datatable-skin.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/paginator/paginator-skin.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/autocomplete/autocomplete-skin.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/core/datatable-core.css, include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/calendar/calendar-skin.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/tabview/tabview-skin.css,include[]=./WebContent/themes/labcorp/yui/280r4/assets/skins/default/treeview/treeview.css!'],
    admin: ['multi-entry-loader?include=./WebContent/js/admin/**/*.js!'],
    lib: ['multi-entry-loader?include=./WebContent/js/lib/**/*.js!'],
    spring: ['./WebContent/js/spring/spring/Spring-Dojo-Config.js', './WebContent/js/spring/dojo/dojo.js', './WebContent/js/spring/spring/Spring.js', './WebContent/js/spring/spring/Spring-Dojo.js'],
    yui: ['./WebContent/js/yui/280r4/yui_debug/yahoo-debug.js', './WebContent/js/yui/280r4/yui_debug/dom-debug.js', './WebContent/js/yui/280r4/yui_debug/event-debug.js', './WebContent/js/yui/280r4/yui_debug/animation-debug.js', './WebContent/js/yui/280r4/yui_debug/connection-debug.js', './WebContent/js/yui/280r4/yui_debug/cookie-debug.js', './WebContent/js/yui/280r4/yui_debug/dragdrop-debug.js', './WebContent/js/yui/280r4/yui_debug/container-debug.js', './WebContent/js/yui/280r4/yui_debug/menu-debug.js', './WebContent/js/yui/280r4/yui_debug/element-debug.js', './WebContent/js/yui/280r4/yui_debug/button-debug.js', './WebContent/js/yui/280r4/yui_debug/datasource-debug.js', './WebContent/js/yui/280r4/yui_debug/json-debug.js', './WebContent/js/yui/280r4/yui_debug/resize-debug.js', './WebContent/js/yui/280r4/yui_debug/tabview-debug.js', './WebContent/js/yui/280r4/yui_debug/calendar-debug.js', './WebContent/js/yui/280r4/yui_debug/selector-debug.js', './WebContent/js/yui/280r4/yui_debug/autocomplete-debug.js', './WebContent/js/yui/280r4/yui_debug/event-delegate-debug.js', './WebContent/js/yui/280r4/yui_debug/treeview-debug.js']
  },
  output: {
    filename: (argv.mode === 'development') ? "[name].js" : '[name]-[contenthash].js',
    path: __dirname + '/WebContent/js/bundle'
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_classnames: true,
          keep_fnames: true
        }
      }),
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader'
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }, {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new WebpackAssetsManifest({
      writeToDisk: true,
    }),
    new MiniCssExtractPlugin({
      filename: (argv.mode === 'development') ? "[name].css" : "[name]-[contenthash].css"
    }),


  ],

  devServer: {
    contentBase: path.join(__dirname, 'WebContent'),
    compress: true,
    port: 9000
  },

  devtool: false
})

И эта устаревшая структура имеет глобальные пространства имен / переменную, например,

• YUI2 -> YAHOO
• Spring- js -> Spring
• Dojo -> dojo

, доступ к которым осуществляется через ресурсы javascript / JSP приложения + html, например,

Пример. html

<html>

<head>

<script src="/WebContent/js/bundle/yui.js"></script>
<script src="/WebContent/js/bundle/spring.js"></script>
<script>
    dojo.subscribe("/dojo/io/start", function(){
        globalEvents.start();
    });

    dojo.subscribe("/dojo/io/stop", function(){
        globalEvents.complete();
    });
</script>
</head>

<body>


<script>
    //SUBSCRIBE TO THE GLOBAL FAILURE AND ABORT EVENTS
    YAHOO.util.Connect.failureEvent.subscribe(globalEvents.failure);
    YAHOO.util.Connect.abortEvent.subscribe(globalEvents.abort);
</script>

</body>
</html>

Проблема в том, что после объединения в пакет веб-пакета эти глобальные переменные / пространства имен недоступны на страницах html, что приводит к ошибкам вроде « YAHOO / dojo is undefined », Итак, как нам решать эта проблема?

Я использую webpack-dev-server для отладки проблемы, все еще не знаю, как лучше всего двигаться дальше, потому что в том же пакете, то есть YUI, его жалобы на «YAHOO» не определены в файле dom -debug. js, хотя он доступен в "yahoo-debug. js".

ошибка консоли разработчика

Примечание: вы можете увидеть все YUI2 модули отсюда,

https://github.com/yui/yui2/tree/master/build