webpack如何导出函数

前言

今天在看国家医保服务平台时候
网址：https://fuwu.nhsa.gov.cn/nationalHallSt/#/search/medical

见到了webpack中使用加载器执行n('7d92')方法后，返回了两个导出函数，比较方便的调用

console.log(n('7d92'))//n是加载器
//输出：
//{ a: [Getter], b: [Getter] }

实现

基本实现原理如下

调用了n.d方法，也就是加载器的d方法，查看d方法具体实现如下

o.d = function (e, t, n) {
	  o.o(e, t) || Object.defineProperty(e, t, {
	          enumerable: !0,
	          get: n
	      })
  },

功能为，在e上定义一个属性，name为t，值为n函数
上面的代码的含义是，执行n(‘7d92’)后，导出了attr1、attr2两个属性，分别代表f和g函数，所以我们就可以在外部调用

当然也可以在"7d92"函数内部将f和g函数挂载到window全局
也可以使用t[‘attr1’] = f，将函数导出

为什么要在t（第二个参数）上设置属性？

因为在加载器中调用当前函数时，代码如下

return e[t].call(i.exports, i, i.exports, o),
            i.l = !0,
            i.exports

第二个参数是i.exports，并且调用加载器返回的也是i.exports，只有将属性赋值到这个对象上，我们才能接收到，以便后续调用

完整代码

window = global;
!function (e) {
    function t(t) {
        for (var n, i, o = t[0], a = t[1], s = 0, l = []; s < o.length; s++)
            i = o[s], Object.prototype.hasOwnProperty.call(r, i) && r[i] && l.push(r[i][0]), r[i] = 0;
        for (n in a)
            Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]);
        for (c && c(t); l.length;)
            l.shift()()
    }

    var n = {},
        i = {
            app: 0
        },
        r = {
            app: 0
        };

    function o(t) {
        if (n[t])
            return n[t].exports;
        var i = n[t] = {
            i: t,
            l: !1,
            exports: {}
        };
        return e[t].call(i.exports, i, i.exports, o),
            i.l = !0,
            i.exports
    }

    window.zqx = o;
    o.e = function (e) {
        var t = [];
        i[e] ? t.push(i[e]) : 0 !== i[e] && {
            DetailModule: 1,
            ServiceCatalog: 1,
            ServiceSearchModule: 1,
            "announcement-list": 1,
            "download-page": 1,
            home: 1,
            personLogin: 1,
            search: 1
        }
            [e] && t.push(i[e] = new Promise((function (t, n) {
            for (var r = "static/css/" + ({
                DetailModule: "DetailModule",
                ServiceCatalog: "ServiceCatalog",
                ServiceSearchModule: "ServiceSearchModule",
                "announcement-list": "announcement-list",
                "download-page": "download-page",
                home: "home",
                personLogin: "personLogin",
                redirect: "redirect",
                search: "search",
                pdfjsWorker: "pdfjsWorker"
            }
                [e] || e) + "." + {
                DetailModule: "0df4703e",
                ServiceCatalog: "ad522408",
                ServiceSearchModule: "a371954e",
                "announcement-list": "0c52b923",
                "download-page": "912854ca",
                home: "e2428e96",
                personLogin: "2f54ee3f",
                redirect: "31d6cfe0",
                search: "77d664d7",
                pdfjsWorker: "31d6cfe0"
            }
                [e] + ".css", a = o.p + r, s = document.getElementsByTagName("link"), l = 0; l < s.length; l++) {
                var c = (h = s[l]).getAttribute("data-href") || h.getAttribute("href");
                if ("stylesheet" === h.rel && (c === r || c === a))
                    return t()
            }
            var u = document.getElementsByTagName("style");
            for (l = 0; l < u.length; l++) {
                var h;
                if ((c = (h = u[l]).getAttribute("data-href")) === r || c === a)
                    return t()
            }
            var d = document.createElement("link");
            d.rel = "stylesheet",
                d.type = "text/css",
                d.onload = t,
                d.onerror = function (t) {
                    var r = t && t.target && t.target.src || a,
                        o = new Error("Loading CSS chunk " + e + " failed.\n(" + r + ")");
                    o.code = "CSS_CHUNK_LOAD_FAILED",
                        o.request = r,
                        delete i[e],
                        d.parentNode.removeChild(d),
                        n(o)
                },
                d.href = a,
                document.getElementsByTagName("head")[0].appendChild(d)
        })).then((function () {
            i[e] = 0
        })));
        var n = r[e];
        if (0 !== n)
            if (n)
                t.push(n[2]);
            else {
                var a = new Promise((function (t, i) {
                    n = r[e] = [t, i]
                }));
                t.push(n[2] = a);
                var s,
                    l = document.createElement("script");
                l.charset = "utf-8",
                    l.timeout = 120,
                o.nc && l.setAttribute("nonce", o.nc),
                    l.src = function (e) {
                        return o.p + "" + ({
                            DetailModule: "DetailModule",
                            ServiceCatalog: "ServiceCatalog",
                            ServiceSearchModule: "ServiceSearchModule",
                            "announcement-list": "announcement-list",
                            "download-page": "download-page",
                            home: "home",
                            personLogin: "personLogin",
                            redirect: "redirect",
                            search: "search",
                            pdfjsWorker: "pdfjsWorker"
                        }
                            [e] || e) + ".1669344602991.js"
                    }
                    (e);
                var c = new Error;
                s = function (t) {
                    l.onerror = l.onload = null,
                        clearTimeout(u);
                    var n = r[e];
                    if (0 !== n) {
                        if (n) {
                            var i = t && ("load" === t.type ? "missing" : t.type),
                                o = t && t.target && t.target.src;
                            c.message = "Loading chunk " + e + " failed.\n(" + i + ": " + o + ")",
                                c.name = "ChunkLoadError",
                                c.type = i,
                                c.request = o,
                                n[1](c)
                        }
                        r[e] = void 0
                    }
                };
                var u = setTimeout((function () {
                    s({
                        type: "timeout",
                        target: l
                    })
                }), 12e4);
                l.onerror = l.onload = s,
                    document.head.appendChild(l)
            }
        return Promise.all(t)
    },
        o.m = e,
        o.c = n,
        o.d = function (e, t, n) {
            o.o(e, t) || Object.defineProperty(e, t, {
                enumerable: !0,
                get: n
            })
        },
        o.r = function (e) {
            "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
                value: "Module"
            }),
                Object.defineProperty(e, "__esModule", {
                    value: !0
                })
        },
        o.t = function (e, t) {
            if (1 & t && (e = o(e)), 8 & t)
                return e;
            if (4 & t && "object" == typeof e && e && e.__esModule)
                return e;
            var n = Object.create(null);
            if (o.r(n), Object.defineProperty(n, "default", {
                enumerable: !0,
                value: e
            }), 2 & t && "string" != typeof e)
                for (var i in e)
                    o.d(n, i, function (t) {
                        return e[t]
                    }
                        .bind(null, i));
            return n
        },
        o.n = function (e) {
            var t = e && e.__esModule ? function () {
                    return e.default
                }
                : function () {
                    return e
                };
            return o.d(t, "a", t),
                t
        },
        o.o = function (e, t) {
            return Object.prototype.hasOwnProperty.call(e, t)
        },
        o.p = "",
        o.oe = function (e) {
            throw e
        };
    var a = window.webpackJsonp = window.webpackJsonp || [],
        s = a.push.bind(a);
    a.push = t,
        a = a.slice();
    for (var l = 0; l < a.length; l++)
        t(a[l]);
    var c = s;
}
({
    "7d92": function (e, t, n) {
        "use strict";

        n.d(t, "attr1", (function () {
            return f
        }));
        n.d(t, "attr2", (function () {
            return g
        }))

        function f() {
            console.log('我是attr1')
        }

        function g() {
            console.log('我是attr1')
        }
    },

})


temp = zqx('7d92')
console.log(temp)
temp.attr1()
temp.attr2()

输出：

{ attr1: [Getter], attr2: [Getter] }
我是attr1
我是attr1