webpack引入jquery插件失败的解决办法
在webpack项目中引入jquery插件jstree时,提示如下错误:TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).jstree is not a functionat a.mounted (list.vue:104)at _e (vue.min.js:6)at Object.ins
在webpack项目中引入jquery插件jstree时,提示如下错误:
TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).jstree is not a function
at a.mounted (list.vue:104)
at _e (vue.min.js:6)
at Object.insert (vue.min.js:7)
at C (vue.min.js:8)
at a.i.nodeOps [as __patch__] (vue.min.js:8)
at a.e._update (vue.min.js:7)
at a.r (vue.min.js:6)
at So.get (vue.min.js:7)
at new So (vue.min.js:7)
at ve (vue.min.js:6)
很显然,是由于jstree插件的方法没有绑定在jquery对象(这里是$)上,仔细检查代码,发现并没有错误,如下:
// 注意先后顺序
import $ from 'jquery'
import 'jstree'
import 'jstree/dist/themes/default/style.css'
// 总输出为undefined
console.log($.fn.jstree)
这点很奇怪,翻阅webpack的文档,因为都是同步从上到下依次引入,所以引用顺序与方法都是绝对正确的,难道是webpack打包时没有引入相关的代码?
检验生成的js文件,发现jstree源码赫赫在目,说明webpack也没有问题,那问题到底出现在哪里?难道时jstree版本的问题?
再次检验项目下的node_modules文件,发现除了正常的jstree与jquery文件夹,还有如下内容:
1. _jquery@3.2.1@jquery
2. _jstree@3.3.4@jstree
这是什么?经过询问,这是执行cnpm安装后的结果,也就是说先用npm安装了依次jstree,后又因为感觉cnpm执行速度快,用cnpm再安装了一次。
知道了问题的产生原因,那么就很好解决了,首先直接删除cnpm安装生成的文件夹,然后用npm重新安装一次jstree即可,如下:
cd node_modules
rm -Rf _jquery@3.2.1@jquery
rm -Rf _jstree@3.3.4@jstree
npm install jstree --save
再次运行项目,发现jstree已工作正常。
最后跟踪webpack的编译过程,我们发现,通过cnpm安装的架包往往具有更高的调用优先级,这也导致jquery的相关插件都有可能出现错误,如下。
ERROR in ./~/css-loader!./~/_jstree@3.3.4@jstree/dist/themes/default/style.css
Module build failed: Error: ENOENT: no such file or directory, open 'D:\Workspace\yii-hot-vue\node_modules\_jstree@3.3.4@jstree\dist\themes\default\style.css'
所以,如果上述手动排除的方法不能解决你的问题,强烈建议你先删除所有的npm架包,然后再执行全部安装,如下:
# 先删除所有的文件
rm -Rf node_modules
# 执行项目的全量安装
npm install
结论
在对前端项目进行管理时,要么全部都使用npm进行管理,要么全部都是用cnpm进行管理,切不可混合使用,最后导致出现架包冲突,如果jquery的插件出现了无法找到的情况,请检查是否调用了cnpm的缘故。
更多推荐
所有评论(0)