在 vue 项目中使用 zTree

1. 安装依赖

npm i @ztree/ztree_v3
npm i jquery@1.12.4

2. 导入插件

// main.js
import $ from 'jquery'
import '@ztree/ztree_v3/js/jquery.ztree.core.js'
import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'

3. 尝试启动项目

在终端执行 npm run dev 启动项目，打开浏览器，很不幸，页面报错了：

Uncaught ReferenceError: jquery.ztree.core.js:1986 Uncaught ReferenceError: jQuery is not defined
  at Object../node_modules/@ztree/ztree_v3/js/jquery.ztree.core.js (jquery.ztree.core.js:1986)
  at __webpack_require__ (bootstrap:723)
  at fn (bootstrap:100)
  at Object../src/main.js (main.js:47)
  at __webpack_require__ (bootstrap:723)
  at fn (bootstrap:100)
  at Object.1 (index.vue?bc88:1)
  at __webpack_require__ (bootstrap:723)
  at bootstrap:790
  at bootstrap:790

找不到 jQuery 了，什么回事呢？

原来呀，以前是使用 <script> 标签来加载 jquery 的，并且会将其挂载到全局中，所以在执行 jquery.ztree.core.js 时能正常地获取到 jQuery 。而在 vue 项目中，经过 webpack 打包后，在 main.js 中导入的 $ 和 jquery.ztree.core.js 是各自处在不同的上下文环境的，自然就不能找到 jQuery 了。

4. 修改 webpack 配置

// vue.config.js
const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、window.jQuery，就会自动导入对应的依赖项，比如上面代码中的 jquery 模块。

同时，你也不需要再在项目中显式地导入 jquery 了，也就是说你可以将 main.js 中的 import $ from 'jquery' 删掉了。

重新启动项目，页面没有报错。

5. 赶紧写个 demo 看一哈~

<template>
  <div class="app-container">
    <ul
      id="treeDemo"
      class="ztree"
    />
  </div>
</template>

<script>
export default {
  name: 'ZTree',
  mounted() {
    $.fn.zTree.init($('#treeDemo'), {}, [
      {
        name: 'test1',
        open: true,
        children: [{ name: 'test1_1' }, { name: 'test1_2' }]
      },
      {
        name: 'test2',
        open: true,
        children: [{ name: 'test2_1' }, { name: 'test2_2' }]
      }
    ])
  }
}
</script>

淦~

编译出错了：

Module Warning (from ./node_modules/eslint-loader/index.js):
error: '$' is not defined (no-undef) at src\views\ztree\index.vue:14:5:
  12 |   name: 'ZTree',
  13 |   mounted() {
> 14 |     $.fn.zTree.init($('#treeDemo'), {}, [
     |     ^
  15 |       {
  16 |         name: 'test1',
  17 |         open: true,

这是 eslint 的 no-undef 规则导致的，这条规则禁用未声明的变量，怎么办呢？

6. 修改 eslint 配置

// .eslintrc.js
module.exports = {
  env: {
    jquery: true
  }
}

env 选项定义了预定义的全局变量，添加了上述代码，那么 eslint 就会认为 jquery 是全局变量而不是一个未定义的变量了。

再次重新启动项目，就可以看到正常加载的 zTree 树形组件了~

7. 参考资料

webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？
ProvidePlugin | webpack
List of available rules - ESLint中文文档
.eslintrc 文件配置详解 - 知乎