$（…）。dateatepicker不是一个函数

我使用webpack并想使用bootstrap-datetimepicker 。 在我的webpack配置中，我使用ProvidePlugin来获取“jquery模块”。

在我的代码中，我得到错误$(...).datetimepicker is not a function当我调用$('#datetimepicker12').datetimepicker函数时， $('#datetimepicker12').datetimepicker函数。 我不知道为什么$ variable不包含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 }) ] }); } 

index.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 
 
 
 
 
 
 
 
 
; } } ReactDOM.render( , document.getElementById('content')); 

的package.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" } } 

Answer 1

对$ .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 loader的参数到底是做什么的？

当你看到源代码时，它开始于

 '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，它将define和exports （在包装模块内定义内）设置为false ，允许它进入“使用全局”部分，这正是我们想要的。 moment=moment告诉它设置一个等于require('moment')的变量moment ，现在当datepicker尝试从全局变量中解析库时，它会到达var moment=... definition。 如果你打算从全局变量中包含moment （而不是npm依赖），你应该省略这个参数。

Answer 2

在这里找到一个更简单的解决方案： 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') } } }; 

Answer 3

你需要检查＃datetimepicker12是否正确它是否存在于你的浏览器中。按F12并按ctrl + F并找到id存在。 而另一种方式任何错误jquery文件在您的页面上丢失espacially datetime picker js文件您得到关于该文件的错误404.put该文件在顶部所有js文件希望您的问题将被解决

Answer 4

解决方案是在Github上的pull请求中。