尝试使用 timepicker.co，'timepicker is not a function'错误

Question

尝试使用https://timepicker.co/使用npm和webpack。

我用npm命令npm i jquery安装了jQuery，然后用将其导入到我的主js文件中

import $ from 'jquery';

这很好用，我可以使用jQuery。

接下来，按照说明，我用npm命令npm i jquery-timepicker安装了时间选择器

这为package.json文件添加了时间选择器：

"dependencies": {
"googleapis": "^108.0.0",
"jquery": "^3.6.1",
"jquery-timepicker": "^1.3.3"
},

webpack构建得很好。然而，当页面加载时，我运行命令来启动我的输入字段

$('input.timepicker').timepicker({});

我在控制台中得到这个错误：

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).timepicker is not a function

说，阅读文件

要使用jQuery Timepicker，您需要包含两个文件：jquery.timepicker.min.js和jquery.ttimepicker.min.css

我是一个使用npm的新手，我认为我会使用以下内容导入js文件：

import timepicker from 'jquery-timepicker';

但这引发了一个webpack错误。

我觉得我错过了一些简单的东西。如何使用webpack和npm包含这两个必需的文件？

更新1：尝试在我的主index.js文件中导入css和js

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

仍然得到错误：Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).timepicker is not a function

Answer 1

我相信您正面临这个问题，因为jquery-timepicker没有index.js文件。来源：https://unpkg.com/browse/jquery-timepicker@1.3.3/

尝试：

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

这应该会自动设置插件。

Answer 2

为了帮助像我这样的新手，我用@acdccjunior的答案作为关键，但我必须做很多事情才能做到这一点。

以下是如何使用https://timepicker.co/使用npm和webpack。

步骤1.使用npm:npm i jquery-timepicker安装时间选择器

步骤2.由于时间选择器需要jquery，请使用npm:npm i jquery安装jquery

步骤3.您需要在要使用的页面上使用javascript和css。因此，请使用webpack导入两者。

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

步骤4.Webpack会抱怨，因为它不知道如何开箱即用地处理css。因此，您需要安装css加载程序和样式加载程序(文档中没有明确说明这一点。

npm install --save-dev css-loader
npm install --save-dev style-loader

步骤5.要完成安装，请告诉webpack如何使用这两个加载程序。添加到您的webpack.config.js文件中，确保[]阵列中的顺序正确：

module: {
rules: [
{
test: /.css$/i,
// order is load css first, then put that on the page using style loader. 
// But they load in reverse order so the order in the array is important. 
use: ["style-loader", "css-loader"], 

},
],
},

第6步：CSS现在会很好地加载，但在你告诉webpack提供jQuery作为插件之前，你会得到错误jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).timepicker is not a function，这将使它在全球范围内可用。这篇文章向我展示了如何做到这一点，因此我们将添加到您的webpack.config.js文件中：

plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: "jquery"
})     
],

步骤7:这将引发一个错误，说明webpack未定义。这太疯狂了，因为这是一个webpack配置文件。但是new.webpack没有被识别，所以我们必须告诉webpack，什么是webpack

const webpack = require('webpack');

现在我们安装了jQuery，jQuery是一个全局变量。我们已经安装了jquery时间选择器，并将其导入到我们的主js文件中。我们已经安装了jquery时间选择器css，并将其导入到我们的主js文件中，并由webpack识别。

现在它起作用了。现在我们可以休息了。