webpack打包去掉了源文件里面的变量，调用报错问题

问题描述

问 题

我的源文件：

var $backToTopEle = $('<a href="javascript:void(0)" class="Hui-iconfont toTop" title="返回顶部" alt="返回顶部" style="display:none">&#xe684;</a>').appendTo($("body")).click(function() {
    $("html, body").animate({
        scrollTop: 0
    }, 120);
});
var $backToTopFun = function() {
    var st = $(document).scrollTop(),
        winh = $(window).height();
    (st > 0) ? $backToTopEle.show(): $backToTopEle.hide();
    /*IE6下的定位*/
    if (!window.XMLHttpRequest) {
        $backToTopEle.css("top", st + winh - 166);
    }
};

打包出来的文件：

n('<a href="javascript:void(0)" class="Hui-iconfont toTop" title="返回顶部" alt="返回顶部" style="display:none">&#xe684;</a>').appendTo(n("body")).click(function() {
    n("html, body").animate({
        scrollTop: 0
    }, 120)
});

打包出来的文件去掉了我源文件里面的 $backToTopEle 和 $backToTopFun 变量，所以我在页面直接调用$backToTopEle()的时候显示$backToTopEle is not defined;

想问下如何解决这个问题

解决方案

因为你在这个文件后续的代码里，并没有使用$backToTopEle和$backToTopEle，所以webpack就认为是多余的就给你删掉了。

不知道你说的在页面直接调用$backToTopEle()是什么意思？我猜想你是想在页面入口的js文件里调用吧？那样子的话请在该源文件里用module.exports把$backToTopEle和$backToTopEle给导出来让页面入口来使用

这篇关于webpack打包去掉了源文件里面的变量，调用报错问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！