鍍金池/ 問答/HTML/ 用到j(luò)sonp的js文件用webpack打包后為何失效？

用到j(luò)sonp的js文件用webpack打包后為何失效？

自己在想做一個(gè)有關(guān)搜索框的實(shí)驗(yàn)。
選擇百度的api，因?yàn)樯婕暗娇缬?，所以用的了jsonp技術(shù)。
index.js源碼如下，

var ipt = document.getElementById('input');
    list = document.getElementById('list');
    Script = null;
ipt.onkeyup = function() {
    if(Script) {
        document.body.removeChild(Script);
    }
    Script = document.createElement('script');
    Script.src = 'http://suggestion.baidu.com/su?wd=' + ipt.value+'&cb=mycallback&_='+new Date().getTime();
    document.body.appendChild(Script);
}
function mycallback(json) {
    console.log(json);
}

index.html源碼（先導(dǎo)入webpack編譯打包后的bundle.js文件）如下

<body>
    <form action="" id="_form">
        <input id="input" type="text" placeholder="請(qǐng)輸入搜索項(xiàng)">
        <button type="button"> 點(diǎn)擊搜索 </button>
        <ul class="wrap">
            <li>搜索結(jié)果1</li>
            <li>搜索結(jié)果2</li>
        </ul>
    </form>
    <script type="text/javascript" src="bundle.js"></script>
</body>

瀏覽器顯示出錯(cuò)，出錯(cuò)原因是回調(diào)函數(shù)未定義（可我明明已經(jīng)定義了啊）

clipboard.png

然后在html文件中導(dǎo)入不經(jīng)過webpack打包的js文件

    <form action="" id="_form">
        <input id="input" type="text" placeholder="請(qǐng)輸入搜索項(xiàng)">
        <button type="button"> 點(diǎn)擊搜索 </button>
        <ul class="wrap">
            <li>搜索結(jié)果1</li>
            <li>搜索結(jié)果2</li>
        </ul>
    </form>
    <script type="text/javascript" src="index.js"></script>

網(wǎng)頁正常顯示

clipboard.png

請(qǐng)問這是為什么，
難道webpack不支持jsonp這種方法？應(yīng)該不可能啊
還是我哪個(gè)環(huán)節(jié)疏漏了？

回答
編輯回答
女流氓

jsonp的回調(diào)函數(shù)必須是全局的，而webpack打包后所有單個(gè)js文件都會(huì)被當(dāng)成其一個(gè)模塊，除非直接聲明成全局方法，否則js內(nèi)的方法都會(huì)被當(dāng)成其內(nèi)部方法，外部無法調(diào)用到。改成window.myCallback = function(){...}看看

2017年5月10日 19:34