$(...).datetimepicker 不是函数 [英] $(...).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);常见的变量 = {缓存:真实,调试:真的,条目:'./src/script/index.jsx',解决: {扩展名:['', '.js', '.jsx']},输出: {文件名:'index.js',sourceMapFilename: '[文件].map'},模块: {装载机:[{测试:/.js[x]?$/,装载机:['babel'],排除:/(node_modules|bower_components)/}, {测试:/.css$/,加载器:['样式','css']}, {测试:/.scss$/,加载器:['style', 'css', 'postcss', 'sass']}, {测试:/.less$/,加载器:['style', 'css', 'less']}, {测试:/.woff$/,loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"}, {测试:/.woff2$/,loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"}, {测试:/.(eot|ttf|svg|gif|png)$/,加载器:文件加载器"}]},插件: [新的 webpack.ProvidePlugin({$: "jquery",jQuery:jquery"})],postcss:函数(){返回 [自动前缀({浏览器:['最后 3 个版本']})];}};if (TARGET === 'dev' || !TARGET) {module.exports = 合并(普通,{开发工具:'评估源地图',开发服务器:{historyApiFallback: 真},输出: {publicPath: 'http://localhost:8090/assets'},插件: [新的 NpmInstallPlugin({保存:真//--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');类 DateTimePicker 扩展了 React.Component {componentDidMount(){$('#datetimepicker12').datetimepicker({内联:真实,并排:真});}使成为() {返回 <div className="form-group"><div className="row"><div className="col-md-8"><div id="datetimepicker12"></div>
;}}ReactDOM.render(<DateTimePicker/>, document.getElementById('content'));
package.json
<代码>{"name": "webpack-bootstrap-datetimepicker",版本":0.0.0","description": "webpack-bootstrap-datetimepicker","main": "index.jsx",脚本":{"start": "npm run serve | npm run dev","服务": "./node_modules/.bin/http-server -p 8080","dev": "webpack-dev-server -d --progress --colors --port 8090"},开发依赖":{"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","引导程序": "^3.3.6","css-loader": "^0.23.1","文件加载器": "^0.8.5","html-webpack-plugin": "^2.8.1","http-server": "^0.8.5","jquery": "^2.2.0","少": "^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",反应":^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"},依赖关系":{eonasdan-bootstrap-datetimepicker":^4.15.35"}}
解决方案在 pull在 Github 上请求.
I use webpack and want to use bootstrap-datetimepicker. In my webpack config I use ProvidePlugin to get "jquery module".
In my code I get error $(...).datetimepicker is not a function
when I call $('#datetimepicker12').datetimepicker
function. I don't why $
variable doesn't contain datetimepicker
function, which should be defined in 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 <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
{
"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"
}
}
Solution is in pull request on Github.
这篇关于$(...).datetimepicker 不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!