$ (...)। डेटीमपिकर फ़ंक्शन नहीं है

Question

मैं webpack का उपयोग करता हूं और bootstrap-datetimepicker का उपयोग करना चाहता हूं। मेरे वेबपैक कॉन्फ़िगरेशन में मैं "jquery मॉड्यूल" प्राप्त करने के लिए ProvidePlugin का उपयोग करता हूं।

मेरे कोड में मुझे $(...).datetimepicker is not a function त्रुटि मिलती है जब मैं $('#datetimepicker12').datetimepicker फ़ंक्शन पर कॉल करता हूं। मैं क्यों $ चर 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 <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" 
    } 
} 

Answer 1

समाधान पर pull request में है कि के बारे में त्रुटि 404 मिलता है Github।

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

वास्तव में क्या imorts लोडर के लिए इन तर्कों करते हैं: (संपादन स्रोत के बिना) $ .fn लगातार के लिए परिवर्तन करने की

Answer 2

आपको # datetimepicker12 की जांच करने की आवश्यकता है या यह आपके ब्राउज़र में मौजूद नहीं है या नहीं। F12 दबाएं और ctrl + f दबाएं और आईडी मौजूद है। और दूसरी तरह के किसी भी त्रुटि jQuery फ़ाइल अपने पृष्ठ पर espacially दिनांक पिकर js फ़ाइल गुम आप शीर्ष सब js फ़ाइलों आशा पर उस फ़ाइल के file.put आपकी समस्या का समाधान हो जाएगा

Answer 3

एक तरह से imports के साथ संयोजन में expose प्लगइन का उपयोग करने के लिए है?

आप स्रोत को देखते हैं, यह

'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 जावास्क्रिप्ट का एक टुकड़ा है कि दोनों define और exports सेट (लिपटे मॉड्यूल परिभाषा के अंदर पहले जोड़ता आगे बढ़ता है) false पर, इसे "ग्लोबल्स का उपयोग करें" भाग में आगे बढ़ने की इजाजत दी गई, जो वही है जो हम चाहते हैं। moment=moment इसे को require('moment') के बराबर एक चर सेट करने के लिए कहता है, अब जब डेटपिकर ग्लोबल्स से पुस्तकालयों को हल करने का प्रयास करता है, तो यह var moment=... परिभाषा तक पहुंच जाता है। यदि आप ग्लोबल्स से moment (एनपीएम निर्भरता के रूप में नहीं) को शामिल करने की योजना बना रहे हैं, तो आपको यह तर्क छोड़ देना चाहिए।

Answer 4

यहाँ एक सरल समाधान मिल गया: 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') 
     } 
    } 
};