[英]$(…).datetimepicker is not a function
I use webpack and want to use bootstrap-datetimepicker . 我使用webpack并想使用bootstrap-datetimepicker 。 In my webpack config I use ProvidePlugin to get "jquery module". 在我的WebPack配置我用ProvidePlugin得到“jQuery的模块”。
In my code I get error $(...).datetimepicker is not a function
when I call $('#datetimepicker12').datetimepicker
function. 在我的代码中,我得到错误$(...).datetimepicker is not a function
当我调用$('#datetimepicker12').datetimepicker
函数时, $('#datetimepicker12').datetimepicker
函数。 I don't why $
variable doesn't contain datetimepicker
function, which should be defined in var datetimepicker = require('eonasdan-bootstrap-datetimepicker');
我不知道为什么$
variable不包含datetimepicker
函数,它应该在var datetimepicker = require('eonasdan-bootstrap-datetimepicker');
webpack.config.js 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 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 <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'));
package.json 的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"
}
}
One way of making the changes for $.fn persistent (without editing the source) is to use expose
plugin in combination with imports
: 对$ .fn持久化(不编辑源代码)进行更改的一种方法是将expose
plugin与imports
结合使用:
module : {
loaders : [
{
test : /jquery/,
loader : 'expose-loader?$!expose?jQuery'
},
{
test : /eonasdan-bootstrap-datetimepicker/,
loader : 'imports-loader?define=>false,exports=>false,moment=moment'
}]
}
What exactly do these arguments for imorts loader do? 这些对于imorts loader的参数究竟做了什么?
When you look at the source, it starts with 当您查看源代码时,它始于
'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'));
and then proceeds 然后继续
} else {
// Neither AMD nor CommonJS used. Use global variables.
This part define=>false,exports=>false
prepends a piece of JavaScript that sets both define
and exports
(inside wrapped module definition) to false
, allowing it to proceed to the "use the globals" part, which is exactly what we want. 这部分define=>false,exports=>false
预装了一段JavaScript,它将define
和exports
(在包装模块内定义内)设置为false
,允许它继续执行“使用全局”部分,这正是我们想要的。 moment=moment
tells it to set a variable moment
equal to require('moment')
, now when the datepicker tries to resolve the libraries from the globals, it reaches to the var moment=...
definition. moment=moment
告诉它设置一个等于require('moment')
的变量moment
,现在当datepicker试图从全局变量中解析库时,它会到达var moment=...
definition。 If you plan to include moment
from the globals (not as npm dependency), you should omit this argument. 如果你打算从全局变量中包含moment
(而不是npm依赖),你应该省略这个参数。
Found a simpler solution here: https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1319 在这里找到一个更简单的解决方案: https : //github.com/Eonasdan/bootstrap-datetimepicker/issues/1319
The solution: 解决方案:
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')
}
}
};
you need to check #datetimepicker12 is correct or not it exist to your browser or not.press F12 and press ctrl+F and find id exist. 你需要检查#datetimepicker12是否正确它是否存在于你的浏览器中。按F12并按ctrl + F并找到id存在。 And the other way any error jquery file missing espacially datetime picker js file on your page you get error 404 about that file.put that file at the top all js files hope your problem will be solve 而另一种方式任何错误jquery文件在您的页面上丢失特别日期时间选择器js文件您得到关于该文件的错误404.put该文件在顶部所有js文件希望您的问题将被解决
解决方案是在Github上的pull请求中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.