使用npm+webpack集成timepicker.co报错'timepicker is not a function'

核心问题原因 #

jquery-timepicker作为jQuery插件，需要挂载到全局的$/jQuery对象上才能生效。如果webpack没有将jQuery暴露为全局变量，插件无法找到jQuery原型进行扩展，就会出现timepicker is not a function的错误。

解决方案步骤 #

1. 配置webpack让jQuery全局可用 #

修改你的webpack.config.js，添加ProvidePlugin来自动将jQuery注入到每个模块，并暴露为全局变量：

const webpack = require('webpack');

module.exports = {
  // 其他已有配置（entry、output等）
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

2. 正确导入样式和插件 #

在你的主JS文件（比如index.js）中，按以下顺序导入：

// 导入jQuery（配置ProvidePlugin后可省略，但保留更稳妥）
import $ from 'jquery';
// 导入timepicker的样式文件
import 'jquery-timepicker/jquery.timepicker.css';
// 导入timepicker插件（无需赋值变量，插件会自动扩展jQuery）
import 'jquery-timepicker';

3. 初始化timepicker #

确保在DOM加载完成后执行初始化：

$(document).ready(() => {
  $('input.timepicker').timepicker({
    // 这里添加你的配置选项，比如：
    // timeFormat: 'H:i',
    // interval: 30
  });
});

备选方案：使用expose-loader暴露jQuery #

如果不想修改webpack配置，也可以用expose-loader直接在导入时将jQuery暴露到全局：

1. 先安装loader：

npm install expose-loader --save-dev

2. 修改主JS文件的导入：

import $ from 'expose-loader?$!jquery';
import jQuery from 'expose-loader?jQuery!jquery';

import 'jquery-timepicker/jquery.timepicker.css';
import 'jquery-timepicker';

// 初始化代码同上

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