用到jsonp的js文件用webpack打包后为何失效？

Question

用到jsonp的js文件用webpack打包后为何失效？

发布于
2017-12-07

自己在想做一个有关搜索框的实验。
选择百度的api，因为涉及到跨域，所以用的了jsonp技术。
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源码（先导入webpack编译打包后的bundle.js文件）如下

<body>
    <form action="" id="_form">
        <input id="input" type="text" placeholder="请输入搜索项">
        <button type="button"> 点击搜索 </button>
        <ul class="wrap">
            <li>搜索结果1</li>
            <li>搜索结果2</li>
        </ul>
    </form>
    <script type="text/javascript" src="bundle.js"></script>
</body>

浏览器显示出错，出错原因是回调函数未定义（可我明明已经定义了啊）

然后在html文件中导入不经过webpack打包的js文件

    <form action="" id="_form">
        <input id="input" type="text" placeholder="请输入搜索项">
        <button type="button"> 点击搜索 </button>
        <ul class="wrap">
            <li>搜索结果1</li>
            <li>搜索结果2</li>
        </ul>
    </form>
    <script type="text/javascript" src="index.js"></script>

网页正常显示

请问这是为什么，
难道webpack不支持jsonp这种方法？应该不可能啊
还是我哪个环节疏漏了？

javascript webpack

阅读 2.2k

1 个回答

得票最新

梦梦她爹

1.8k1614

发布于
2017-12-07

✓ 已被采纳

jsonp的回调函数必须是全局的，而webpack打包后所有单个js文件都会被当成其一个模块，除非直接声明成全局方法，否则js内的方法都会被当成其内部方法，外部无法调用到。改成window.myCallback = function(){...}看看

撰写回答