wordpress webpack javascript函数未从主题中找到

woobm2wo  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(119)

我的alertHi.js将被加载,但我不能从主题使用它。

JS源警报Hi.js:

这个(inc/Components/Darkmode/src/alertHi.js)将在我加载页面时执行:

function alertHi(){ alert('hi') }
alertHi();
console.log('is loaded');

但是

html-源代码
<a onclick="alertHi()">☀️</a>

会产生此错误:

错误:未定义alertHi

但是如果我从页面调用函数alertHi(),我会得到错误:

Uncaught ReferenceError: alertHi is not defined
    onclick http://localhost/wordpress/:1

你知道吗?

JS-最小源距离/警报最小值js:

webback已生成dist/alertHi.min.js

/******/ (() => { // webpackBootstrap
/******/    // The require scope
/******/    var __webpack_require__ = {};
/******/    
/************************************************************************/
/******/    /* webpack/runtime/make namespace object */
/******/    (() => {
/******/        // define __esModule on exports
/******/        __webpack_require__.r = (exports) => {
/******/            if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/                Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/            }
/******/            Object.defineProperty(exports, '__esModule', { value: true });
/******/        };
/******/    })();
/******/    
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
(() => {
/*!*************************************************!*\
  !*** ./inc/Components/Darkmode/src/alertHi.js ***!
  \*************************************************/
function alertHi() {
  alert('alertHi says hello :)');
}
alertHi();
console.log('script loaded');
})();

// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
/*!***************************************************!*\
  !*** ./inc/Components/Darkmode/src/alertHi.scss ***!
  \***************************************************/
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin

})();

/******/ })()
;
//# sourceMappingURL=alertHi.min.js.map
之前正在阅读:

并尝试在此处读取提示Cannot call javascript function in wordpress
但得到错误jQuery未定义
也将不会被发现,如果我使用

(function($) {
    function alertHi(){
       alert('hi')
    }
})(jQuery);
ndh0cuux

ndh0cuux1#

webpack默认情况下在内部 Package 所有的bundle,你不能从外部访问它,除非在webpack配置中明确地将它设置为一个库。你也可以把它砍下来,并在你的js代码中添加window.alertHi = alertHi,但这是不推荐的。
请参考Webpack配置API,并将捆绑包输出设置为库。(最好是- UMD/commonjs库)

rjee0c15

rjee0c152#

受到下面这个问题的答案(Define global variable with webpack)和这里这个答案https://stackoverflow.com/a/35825562/2891692的启发,我找到了一个解决方案:
使用全局窗口对象

window.alertHi = function (){ alert('hi') }

相关问题