在这种情况下,我试图导入一个现有的库,我将其称为 troublesome
(使用 Webpack/Babel FWIW)并且它有一个全局引用 jQuery
在其中我试图使用模块语法来解决。
我已经通过以下方式成功地将 jquery 导入模块的“本地”范围:
import jQuery from 'jquery'
所以我尝试了:
import jQuery from 'jquery'
import 'troublesome'
但也许不足为奇,我得到类似 jQuery is not a function
的信息从troublesome.js
踢回来
我也试过这个:
System.import('jquery')
.then(jQuery => {
window.jQuery = jQuery
})
import 'troublesome'
但是,事实证明 System.import
是所谓的“模块加载器”规范的一部分,它是从 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 的一些指导下,我最终能够使用 imports-loader 确定一个以 Webpack 为中心的解决方案。
此解决方案的配置如下所示:
//...
module: {
loaders: [
//...
{
test: require.resolve('troublesome'),
loader: "imports?jQuery=jquery,$=jquery"
}
]
}
最佳答案
匀场模块是要走的路:http://webpack.github.io/docs/shimming-modules.html
我从页面引用:
插件ProvidePlugin
这个插件使一个模块在每个模块中都可以作为变量使用。仅当您使用变量时才需要该模块。
示例:无需编写 require("jquery")
即可在每个模块中使用 $ 和 jQuery。
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
要在你的 webpack-config 中使用它,只需将这个对象添加到配置中名为 plugins 的数组中:
// the plugins we want to use
var plugins = [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
];
// this is your webpack-config
module.exports = {
entry: ...,
output: ...,
module: ...,
plugins: plugins
}
关于javascript - 我可以使用 ES6/2015 模块导入在 'global' 范围内设置引用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31197220/