webpack引入daterangepicker报daterangepicker is not a function的正确用法问询

报错原因 #

daterangepicker是基于jQuery开发的插件，加载时需要从全局作用域获取jQuery和moment实例，才能将自身方法挂载到jQuery原型上。你当前的引入方式没有将jQuery、moment暴露到全局可访问的上下文，插件加载时无法完成挂载，因此调用$().daterangepicker()时会提示方法不存在。 #

完整解决步骤 #

1. 安装全部依赖 #

首先确保已安装所有必要依赖：

yarn add jquery moment daterangepicker

2. 配置webpack全局注入依赖（推荐） #

在webpack配置中使用ProvidePlugin自动注入依赖，不需要每次手动import，同时保证插件加载时能拿到所需的全局实例：

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

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      moment: 'moment'
    })
  ]
}

如果使用vue-cli，上述配置需要写在vue.config.js的configureWebpack字段中；如果使用create-react-app，需要通过eject或customize-cra修改webpack配置。

3. 调整代码引入逻辑 #

在业务代码中按如下顺序导入，同时记得引入daterangepicker的样式文件：

// 无需手动导入jquery和moment，已通过webpack自动注入
import 'daterangepicker'
import 'daterangepicker/daterangepicker.css'

// 初始化逻辑，确保执行时DOM元素已存在
// 原生场景可放在DOMContentLoaded回调中，框架场景放在组件挂载完成的生命周期钩子中
$('#mydaterange').daterangepicker({
  // 可选配置项
})

手动导入的替代方案 #

如果不想配置webpack的全局注入，可按如下顺序手动导入并绑定全局实例：

import $ from 'jquery'
import moment from 'moment'
// 手动绑定到全局window对象
window.$ = $
window.jQuery = $
window.moment = moment
// 导入插件，此时插件可拿到全局实例完成挂载
import 'daterangepicker'
import 'daterangepicker/daterangepicker.css'

$('#mydaterange').daterangepicker()

常见坑点排查 #

• 检查项目中是否存在多个版本的jQuery，不同版本的jQuery实例相互独立，插件只会挂载到加载时拿到的那个实例上
• 如果配置了moment的按需剔除逻辑，不要剔除daterangepicker依赖的核心逻辑和所需语言包
• 确保初始化代码执行时，对应的DOM元素已经渲染到页面上，不要在元素未挂载时执行初始化

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