时间戳

首页 > 解决方案 > Webpack4 捆绑功能未定义

javascript - Webpack4 捆绑功能未定义

问题描述

我使用 webpack4 制作了一个包。制作捆绑文件是完美的，但我的简单网站无法正常工作。

我想在加载 html 页面后执行 getApple() 函数。但我得到的是未定义错误消息功能。

下面是我的源代码。

// index.js

function getApple () {
    console.log('getApple');
}

// ./dist/main.js
! function(t) {
    var a = {};

    function o(e) {
        if (a[e]) return a[e].exports;
        var n = a[e] = {
            i: e,
            l: !1,
            exports: {}
        };
        return t[e].call(n.exports, n, n.exports, o), n.l = !0, n.exports
    }
    o.m = t, o.c = a, o.d = function(e, n, t) {
        o.o(e, n) || Object.defineProperty(e, n, {
            enumerable: !0,
            get: t
        })
    }, 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(n, e) {
        if (1 & e && (n = o(n)), 8 & e) return n;
        if (4 & e && "object" == typeof n && n && n.__esModule) return n;
        var t = Object.create(null);
        if (o.r(t), Object.defineProperty(t, "default", {
                enumerable: !0,
                value: n
            }), 2 & e && "string" != typeof n)
            for (var a in n) o.d(t, a, function(e) {
                return n[e]
            }.bind(null, a));
        return t
    }, o.n = function(e) {
        var n = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return o.d(n, "a", n), n
    }, o.o = function(e, n) {
        return Object.prototype.hasOwnProperty.call(e, n)
    }, o.p = "", o(o.s = 0)
}({
    "./index.js": function(module, __webpack_exports__, __webpack_require__) {
            "use strict";
            eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/polyfill */ "./node_modules/@babel/polyfill/lib/index.js");\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\n\n\nfunction getApple () {console.log('getApple');}
...

// index.php
<head>
    <script type="text/javascript" src="./dist/main.js<?php echo '?version=' . $_versionCode ?>"></script>
</head>
<body>
    <script>getApple(); // not working: Uncaught ReferenceError: getApple is not defined</script>
</body>

有人可以帮我吗....

标签： javascripthtmlwebpackbabeljs

解决方案

似乎您的函数位于模块本身中，这意味着除非您发布它，否则您无法通过窗口对象获取它。因此，为了调用它，您可能必须在模块内调用您的函数或等到您的站点加载：

function getApple () {
  console.log('getApple');
}

getApple()

// OR

window.onload = () => getApple()

或者，如果你想用 window 注册你的函数，然后像你一样稍后调用：

function getApple () {
  console.log('getApple');
}

window.getApple = getApple;

推荐阅读