我正在VueJS中构建一个Web应用程序,但是我遇到一个问题.我想使用一个jQuery扩展(cropit是具体的),但我不知道如何实例化/要求/导入它正确的方式而不会得到错误.
我正在为我的应用程序使用官方的CLI工具和webpack模板.
我在我的main.js文件中包含像这样的jQuery：
import jQuery from 'jQuery' window.jQuery = jQuery
现在我正在构建一个图像编辑器组件,我想要实例化这样的crept：
export default {
ready () {
$(document).ready(function ($) {
$('#image-cropper-wrapper-element').cropit({ /* options */ })
})
},}
但是我不断收到错误…现在我的问题是如何通过NPM / Webpack / Vue正确实例化jQuery和插件？
提前致谢！
解决方法
选项#1：使用ProvidePlugin
将ProvidePlugin添加到build / webpack.dev.conf.js和build / webpack.prod.conf.js中的plugins数组中,以使jQuery在全局范围内可用于所有模块：
plugins: [
// ...
new webpack.ProvidePlugin({
$: 'jquery',jquery: 'jquery','window.jQuery': 'jquery',jQuery: 'jquery'
})
]
选项#2：对Webpack使用Expose Loader模块
正如@TremendusApps在他的回答中所说,添加Expose Loader包：
npm install expose-loader --save-dev
在你的入口点main.js中使用如下：
import 'expose?$!expose?jQuery!jquery' // ...
