webpack引入jquery插件失败的解决办法

在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的缘故。