如何在Vue Webpack项目中可靠加载DataTables插件？

我正在构建一个依赖DataTables的Vue Webpack应用，这个插件依赖jQuery，我尝试用import datatable from 'datatables.net';的方式在Vue组件中导入，但似乎行不通。

目前我是通过动态创建script标签从CDN加载的，代码如下：

<template> 
  <table id="datatable" class="table"></table> 
</template> 
<script> 
export default {
  name: 'MyComponent',
  beforeCreate() {
    // Fetch jQuery and Datatables JS
    const jQueryElem = document.createElement('script');
    jQueryElem.setAttribute('src', 'https://code.jquery.com/jquery-3.3.1.min.js');
    document.head.appendChild(jQueryElem);
    let dataTableIntervalCount = 0;
    const dataTableInterval = setInterval(() => {
      dataTableIntervalCount += 1;
      if (dataTableIntervalCount === 100) {
        clearInterval(dataTableInterval);
        this.dataTableError = true;
      }
      if (window.$) {
        // Load JS
        const dataTableElem = document.createElement('script');
        dataTableElem.setAttribute('src', 'https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js');
        document.head.appendChild(dataTableElem);
        // Load CSS
        const dataTablesCss = document.createElement('link');
        dataTablesCss.setAttribute('rel', 'stylesheet');
        dataTablesCss.setAttribute('type', 'text/css');
        dataTablesCss.setAttribute('href', 'https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css');
        document.head.appendChild(dataTablesCss);
        clearInterval(dataTableInterval);
      }
    }, 50);
  },
}
</script>

这种方式带来了很多麻烦：必须轮询检查jQuery是否加载完成才能加载DataTables，不然控制台会报错；加载完插件后还得用另一个setInterval()初始化表格，偶尔还是会出控制台错误，需要各种变通方案。

请问有没有更可靠的实现方式？谢谢。

真没必要这么折腾地用动态加载的方式，Webpack完全可以帮你理顺jQuery和DataTables的依赖关系，步骤超清晰：

1. 先装必要的依赖 #

通过npm把jQuery、DataTables还有对应的Bootstrap样式包（看你用的是bs4版本）都装到项目里：

npm install jquery datatables.net datatables.net-bs4 --save

2. 配置Webpack让全局能访问jQuery #

因为DataTables需要全局的$或者jQuery对象，所以得在Webpack配置里把jQuery暴露出来。如果你的项目是Vue CLI创建的，直接在vue.config.js里加这段配置就行：

const webpack = require('webpack')

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

要是你是手动配的Webpack，就在webpack.config.js的plugins数组里加上面这个ProvidePlugin就ok。

3. 在Vue组件里直接用就行 #

现在就可以在组件里直接导入DataTables的JS和CSS，然后选对生命周期钩子（比如mounted，这时候DOM已经渲染好了）来初始化表格：

<template>
  <table ref="datatable" class="table table-striped table-bordered"></table>
</template>

<script>
// 导入DataTables的JS和Bootstrap样式
import 'datatables.net-bs4'
import 'datatables.net-bs4/css/dataTables.bootstrap4.css'

export default {
  name: 'MyComponent',
  data() {
    return {
      dtInstance: null // 存一下DataTables实例，后面要操作的话方便
    }
  },
  mounted() {
    // 用ref拿DOM元素比用id更符合Vue的组件化思路，不会冲突
    this.dtInstance = $(this.$refs.datatable).DataTable({
      // 这里写你的表格配置，比如数据源、列定义这些
      data: [
        [ 'Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800' ],
        [ 'Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750' ]
      ],
      columns: [
        { title: 'Name' },
        { title: 'Position' },
        { title: 'Office' },
        { title: 'Extn.' },
        { title: 'Start date' },
        { title: 'Salary' }
      ]
    })
  },
  beforeDestroy() {
    // 组件销毁前记得把DataTables实例也销毁，避免内存泄漏
    if (this.dtInstance) {
      this.dtInstance.destroy()
    }
  }
}
</script>

为啥这个方案靠谱？ #

• 所有依赖都用npm管理，版本能自己控制，不用担心CDN挂了的问题
• Webpack会自动处理依赖顺序，保证jQuery在DataTables之前加载，再也不用手动轮询检查加载状态
• 用Vue的ref获取DOM，比id更安全，不会出现多个组件用同一个id的冲突
• 在mounted里初始化，表格元素肯定已经存在了，不会报找不到DOM的错误
• 组件销毁时清理DataTables实例，避免内存泄漏

内容的提问来源于stack exchange，提问作者JackH