我有这样一种情况,我试图导入一个现有的库,我将其称为troublesome
(使用Webpack / Babel),它在其中具有对jQuery
的全局引用,我正在尝试使用模块语法解决它。
我已经成功地将jquery通过以下方式导入到模块的“本地”作用域中:
import jQuery from 'jquery'
所以我尝试了:
import jQuery from 'jquery'
import 'troublesome'
但也许并不奇怪,我从 troublesome.js
收到了类似于 jQuery不是一个函数
的错误信息。
我也尝试过这个:
System.import('jquery')
.then(jQuery => {
window.jQuery = jQuery
})
import 'troublesome'
然而,事实证明System.import
是所谓的“module-loader”规范的一部分,该规范已从ES6/2015规范中删除,因此Babel不提供它。有一个poly-fill,但Webpack无法管理通过调用System.import
实现的动态导入。
但是...如果我在index.html中按照以下方式调用脚本文件:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>
jQuery
的引用在troublesome.js
中得到解决,事情进展顺利,但我希望避免使用脚本标记,因为webpack不能管理这些标记。
有人能推荐一种处理这种情况的好方法吗?
更新
在@TN1ck的指导下,我最终能够找到一个以Webpack为中心的解决方案,使用imports-loader。
该解决方案的配置看起来像这样:
//...
module: {
loaders: [
//...
{
test: require.resolve('troublesome'),
loader: "imports?jQuery=jquery,$=jquery"
}
]
}
jquery
在troublesome
中可用吗? - Ray Toal