How do I access a *dependent* UMD library from within a web browser?

问题

I'm trying to separate out two large optional pieces of a library so the user doesn't have to load them unless they're needed. Trying to sort out the interdependencies with webpack, however, is driving me crazy. Getting the main part of the library working hasn't been a problem, but making the optional pieces work is going nowhere fast.

Here's just one of many webpack configurations that I've tried:

const umdConfig = env => {
  return {
    mode: env?.dev ? 'development' : 'production',
    target: 'es5',
    entry: {
      index: './dist/index.js',
      timezone_large: { import: './dist/timezone-large.js', dependOn: 'index' },
      timezone_large_alt: { import: './dist/timezone-large-alt.js', dependOn: 'index' }
    },
    output: {
      path: resolve(__dirname, 'dist'),
      filename: `[name].umd.js`,
      libraryTarget: 'umd',
      library: 'tbTime_[name]'
    },
    module: {
      rules: [
        { test: /\.js$/, use: 'babel-loader', resolve: { fullySpecified: false } }
      ]
    },
    externals: ['by-request']
  };
};

What I get for index.umd.js makes sense (a piece of the minimized code, reformatted):

! function(t, e) {
  "object" == typeof exports && "object" == typeof module ? module.exports = e(require("by-request")) : "function" ==
    typeof define && define.amd ? define(["by-request"], e) : "object" == typeof exports ? exports.tbTime_index = e(
      require("by-request")) : t.tbTime_index = e(t["by-request"])
}(self, (function(t) {
  return function() {
    var e = {
        7971: function(t, e, a) {
          "use strict";
          a.d(e, {
            kK: function() {
              return i
            },
            ob: function() {
              return p
            },
  ...

The UMD boilerplate t.tbTime_index = e(t["by-request"]) puts my code on the global variable tbTime_index (t being window in this case), and I can find my main functions and classes on tbTime_index, like I'd hope.

The extra libraries, dependent on the main library, come out a bit differently:

! function(M, c) {
  "object" == typeof exports && "object" == typeof module ? module.exports = c() : "function" == typeof define && define
    .amd ? define([], c) : "object" == typeof exports ? exports.tbTime_timezone_large_alt = c() : M
    .tbTime_timezone_large_alt = c()
}(self, (function() {
  return {
    2999: function(M, c, z) {
      "use strict";
      z.r(c), z.d(c, {
        timezoneLargeAlt: function() {
          return p
        },
        initTimezoneLargeAlt: function() {
          return A
        }
      });
      var b = z(4364);
      const p = {
        "Africa/Abidjan": "-0016 +0000 0;-g/0/LMT 0/0/GMT;1;-2ldXI",
  ...

Instead of having the functions I expect to find on tbTime_timezone_large_alt present, there's a bit of indirections through a function call that's stuck into a numeric index:

Something is apparently expected to call function(M, c, z) with the right arguments both to resolve the functions inside the library, but also arguments needed so the library knows how to resolve calls to the main tbTime_index, which are done with calls that look like this:

b.r.defineTimezones(p)

...where b.r somehow needs to resolve to be the same thing as window.tbTime_index.

Looking over all of the values and functions attached to the window object, so far I don't see anything that would help me resolve the secondary library properly.

来源：https://stackoverflow.com/questions/65460402/how-do-i-access-a-dependent-umd-library-from-within-a-web-browser

标签

javascript

Webpack

browser