$(..).日期时间选取器不是一个函数

$(...).datetimepicker is not a function

本文关键字:函数 一个 日期 时间 选取      更新时间:2023-09-26

我使用 webpack 并希望使用 bootstrap-datetimepicker。在我的webpack配置中,我使用ProvidePlugin来获取"jquery模块"。

在我的代码中,当我调用函数时$('#datetimepicker12').datetimepicker我收到错误$(...).datetimepicker is not a function。我不知道为什么$变量不包含datetimepicker函数,该函数应该在var datetimepicker = require('eonasdan-bootstrap-datetimepicker');中定义

webpack.config.js

var webpack = require('webpack');
var merge = require('webpack-merge');
var NpmInstallPlugin = require('npm-install-webpack-plugin');
var autoprefixer = require('autoprefixer');
const TARGET = process.env.npm_lifecycle_event;
console.log("target event is " + TARGET);
var common = {
  cache: true,
  debug: true,
  entry: './src/script/index.jsx',
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    filename: 'index.js',
    sourceMapFilename: '[file].map'
  },
  module: {
    loaders: [{
      test: /'.js[x]?$/,
      loaders: ['babel'],
      exclude: /(node_modules|bower_components)/
    }, {
      test: /'.css$/,
      loaders: ['style', 'css']
    }, {
      test: /'.scss$/,
      loaders: ['style', 'css', 'postcss', 'sass']
    }, {
      test: /'.less$/,
      loaders: ['style', 'css', 'less']
    }, {
      test: /'.woff$/,
      loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
    }, {
      test: /'.woff2$/,
      loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
    }, {
      test: /'.(eot|ttf|svg|gif|png)$/,
      loader: "file-loader"
    }]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
  postcss: function() {
    return [autoprefixer({
      browsers: ['last 3 versions']
    })];
  }
};
if (TARGET === 'dev' || !TARGET) {
  module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
      historyApiFallback: true
    },
    output: {
      publicPath: 'http://localhost:8090/assets'
    },
    plugins: [
      new NpmInstallPlugin({
        save: true // --save
      })
    ]
  });
}

索引.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var bootstrap = require('bootstrap');
var bootstrapStyle = require("../../node_modules/bootstrap/dist/css/bootstrap.css");
var datetimepicker = require('eonasdan-bootstrap-datetimepicker');
class DateTimePicker extends React.Component {
  componentDidMount(){
    $('#datetimepicker12').datetimepicker({
              inline: true,
              sideBySide: true
          });
  }
  render() {
    return <div id="wrapper">
                <div className="form-group">
                    <div className="row">
                        <div className="col-md-8">
                            <div id="datetimepicker12"></div>
                        </div>
                    </div>
                </div>
            </div>;
  }
}
ReactDOM.render(
  <DateTimePicker/>, document.getElementById('content'));

包.json

{
  "name": "webpack-bootstrap-datetimepicker",
  "version": "0.0.0",
  "description": "webpack-bootstrap-datetimepicker",
  "main": "index.jsx",
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "bootstrap": "^3.3.6",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.8.1",
    "http-server": "^0.8.5",
    "jquery": "^2.2.0",
    "less": "^2.6.0",
    "less-loader": "^2.2.2",
    "node-sass": "^3.4.2",
    "npm-install-webpack-plugin": "^2.0.2",
    "postcss": "^5.0.15",
    "postcss-loader": "^0.8.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.7.3"
  },
  "dependencies": {
    "eonasdan-bootstrap-datetimepicker": "^4.15.35"
  }
}

在这里找到了一个更简单的解决方案:https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1319

解决方案:

var path = require('path');
module.exports = {
    resolve: {
        alias: {
            // Force all modules to use the same jquery version.
            'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
        }
    }
};

使 $.fn 的更改持久化(不编辑源代码)的一种方法是将expose插件与imports结合使用:

module : {
    loaders : [
            {
                test : /jquery/,
                loader : 'expose-loader?$!expose?jQuery'
            },
            {
                test : /eonasdan-bootstrap-datetimepicker/,
                loader : 'imports-loader?define=>false,exports=>false,moment=moment'
            }]
}

这些关于 imorts 加载器的论点究竟有什么作用?

当您查看源时,它始于

'use strict';
if (typeof define === 'function' && define.amd) {
    // AMD is used - Register as an anonymous module.
    define(['jquery', 'moment'], factory);
} else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'), require('moment'));

然后继续

} else {
// Neither AMD nor CommonJS used. Use global variables.

这部分define=>false,exports=>false预置一段 JavaScript,该 JavaScript 将defineexports(包装的模块定义内部)都设置为 false ,允许它继续"使用全局变量"部分,这正是我们想要的。 moment=moment告诉它设置一个变量moment等于require('moment'),现在当日期选择器尝试从全局解析库时,它会到达var moment=...定义。如果您计划包含全局变量中的moment(而不是作为 npm 依赖项),则应省略此参数。

您需要

检查浏览器是否存在 #datetimepicker12 是否正确。按 F12 并按 ctrl+F 并查找 id 存在。另一种方式,任何错误jquery文件丢失,特别是页面上的日期时间选择器js文件,您会收到有关该文件的错误404.将该文件放在顶部所有js文件希望您的问题能够解决

解决方案在 Github 上的拉取请求中。