$(..).日期时间选取器不是一个函数
$(...).datetimepicker is not a function
我使用 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 将define
和exports
(包装的模块定义内部)都设置为 false
,允许它继续"使用全局变量"部分,这正是我们想要的。 moment=moment
告诉它设置一个变量moment
等于require('moment')
,现在当日期选择器尝试从全局解析库时,它会到达var moment=...
定义。如果您计划包含全局变量中的moment
(而不是作为 npm 依赖项),则应省略此参数。
检查浏览器是否存在 #datetimepicker12 是否正确。按 F12 并按 ctrl+F 并查找 id 存在。另一种方式,任何错误jquery文件丢失,特别是页面上的日期时间选择器js文件,您会收到有关该文件的错误404.将该文件放在顶部所有js文件希望您的问题能够解决
解决方案在 Github 上的拉取请求中。
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 我可以在json对象中添加一个函数吗
- Javascript使函数一个接一个地执行
- 是JavaScript中的函数一个对象
- 两个几乎相等的jQuery函数;一个适用于IE,一个不适用于IE
- 两个Javascript函数一个window.onload=Custom.init;和一个window.onload=f
- 使javascript加载函数一个接一个地执行
- 如何通过两个嵌套的匿名函数(一个带有超时的事件处理程序)传递变量
- 为什么我不能让两个jQuery函数一个在另一个里面呢?
- 给函数一个变量名,而不是它的值
- 如何使用嵌入函数(一个滚动页由Pete - peachananr)
- 是否有可能给JavaScript函数一个类型/类?
- 确保两个函数一个接一个地执行,其中第一个函数内部有一个异步调用
- 两个不同的ajax函数一个接一个调用返回相同的值
- jQuery第一次更改函数一个工作
- 给这个函数一个id
- 如何给回调函数一个值一个变量在特定时刻
- 使用回调使两个函数一个接一个地运行
- 两个函数(一个用php)是否可以用“;onclick”;
- 两个几乎相同的函数.一个函数用Queue进行排队.Jquery效果在queued函数上不起作用.为什么