在 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 文件配置詳解 - 知乎