如何在 window 环境中获取 JavaScript UMD 包的完整字符串？ `.toString()` 不工作

Question

我有一个名为 utils 的 UMD 包，它只有一个名为 sum 的方法，如下所示：

<script src="path/to/my/utils-umd.js"></script>
<script>
console.log(utils.sum([1,2,3]));
// => 6
</script>

现在，我想获取我的 UMD 源代码的完整字符串，由于某些原因我不能简单地 fetch('path/to/my/utils-umd.js')，所以我需要同步获取我的 UMD 包字符串。

我尝试了几种方法，但都不成功，以下是其中一些：

window.utils.toString();
// => "[object Module]"
Object.prototype.toString.call(window.utils);
// => "[object Module]"
typeof window.utils;
// => "object"
JSON.stringify(window.utils)
// => "{}"

这是我的完整 UMD 包源代码：

(function(e, t) {
  'object' === typeof exports && 'object' === typeof module
    ? (module.exports = t())
    : 'function' === typeof define && define.amd
    ? define([], t)
    : 'object' === typeof exports
    ? (exports['utils'] = t())
    : (e['utils'] = t());
})('undefined' !== typeof self ? self : this, function() {
  return (function(e) {
    var t = {};
    function n(r) {
      if (t[r]) return t[r].exports;
      var o = (t[r] = { i: r, l: !1, exports: {} });
      return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports;
    }
    return (
      (n.m = e),
      (n.c = t),
      (n.d = function(e, t, r) {
        n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r });
      }),
      (n.r = function(e) {
        'undefined' !== typeof Symbol &&
          Symbol.toStringTag &&
          Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
          Object.defineProperty(e, '__esModule', { value: !0 });
      }),
      (n.t = function(e, t) {
        if ((1 & t && (e = n(e)), 8 & t)) return e;
        if (4 & t && 'object' === typeof e && e && e.__esModule) return e;
        var r = Object.create(null);
        if (
          (n.r(r),
          Object.defineProperty(r, 'default', { enumerable: !0, value: e }),
          2 & t && 'string' != typeof e)
        )
          for (var o in e)
            n.d(
              r,
              o,
              function(t) {
                return e[t];
              }.bind(null, o)
            );
        return r;
      }),
      (n.n = function(e) {
        var t =
          e && e.__esModule
            ? function() {
                return e['default'];
              }
            : function() {
                return e;
              };
        return n.d(t, 'a', t), t;
      }),
      (n.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t);
      }),
      (n.p = ''),
      n((n.s = 'fae3'))
    );
  })({
    f6fd: function(e, t) {
      (function(e) {
        var t = 'currentScript',
          n = e.getElementsByTagName('script');
        t in e ||
          Object.defineProperty(e, t, {
            get: function() {
              try {
                throw new Error();
              } catch (r) {
                var e,
                  t = (/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack) || [!1])[1];
                for (e in n)
                  if (n[e].src == t || 'interactive' == n[e].readyState)
                    return n[e];
                return null;
              }
            }
          });
      })(document);
    },
    fae3: function(e, t, n) {
      'use strict';
      var r;
      (n.r(t), 'undefined' !== typeof window) &&
        (n('f6fd'),
        (r = window.document.currentScript) &&
          (r = r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)) &&
          (n.p = r[1]));
      function o(e) {
        return e.reduce(function(e, t) {
          return e + t;
        }, 0);
      }
      n.d(t, 'sum', function() {
        return o;
      });
    }
  });
});
//# sourceMappingURL=utils.umd.min.js.map

可以这样做吗？

Answer 1

您只能使用 toString 方法获取函数的源代码，您可以尝试将所有 UMD 捆绑到具有名称的函数中运行然后您将能够获得使用 toString 的源代码例如：

function foo() {
  console.log('foo')
  return true;
}
document.getElementById('res').innerText = foo.toString();

<div id="res">
  aaaaaaaaaa
</div>

Answer 2

我使用 XMLHttpRequest 将 JS 文件转换为字符串希望对您有所帮助。

  <script src="utils-umd.js"></script>
    <script>
    var client = new XMLHttpRequest();
    client.open('GET', 'utils-umd.js');
    client.onreadystatechange = function() {
      console.log(client.responseText);
    }
    client.send();
    </script>

Answer 3

I can't simply fetch('path/to/my/utils-umd.js') for some reason

如果您可以通过 <script src='?'> 加载脚本，那么我看不出 fetch 无法工作的原因。

下面是一个使用 fetch..

将 jquery 加载到文本区域的示例

const jqueryurl = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';

async function getjquerySrc() {
  document.querySelector('textarea').value =
    await(await fetch(jqueryurl)).text();
}

getjquerySrc();

textarea {
  width: 100%;
}

<textarea rows=10>
</textarea>

如何在 window 环境中获取 JavaScript UMD 包的完整字符串？ `.toString()` 不工作

How can I get full string of my JavaScript UMD package in window environment? `.toString()` is not working

javascript

string

json

object

umd