$ (...). Datetimepicker non è una funzione

Question

Io uso webpack e voglio usare bootstrap-datetimepicker. Nella mia configurazione del pacchetto web uso il ProvidePlugin per ottenere il "modulo jquery".

Nel mio codice ottengo l'errore $(...).datetimepicker is not a function quando chiamo la funzione $('#datetimepicker12').datetimepicker. Non perché $ variabile non contiene datetimepicker funzione, che dovrebbe essere definito 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" 
    } 
} 

Answer 1

soluzione è nella pull request su Github.

Answer 2

è necessario controllare # datetimepicker12 è corretto o non esiste per il browser o no.press F12 e premere ctrl + F e find id esistono. E l'altro modo qualsiasi file jquery errore mancante selettore file espaciallyContact datetime js sulla tua pagina si ottiene l'errore 404 di quella file.put quel file in alto tutti i file js sperano il vostro problema sarà risolvere

Answer 3

Un modo di fare le modifiche per $ .fn persistente (senza modificare il sorgente) è quello di utilizzare expose plug-in combinazione con imports:

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

Che cosa fanno questi argomenti per imorts loader fanno?

Quando si guarda alla fonte, si inizia con

'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')); 

e poi procede

} else { 
// Neither AMD nor CommonJS used. Use global variables. 

Questa parte define=>false,exports=>false antepone un pezzo di codice JavaScript che imposta sia define e exports (all'interno definizione del modulo avvolto) a false, permettendogli di procedere alla parte "usa le globali", che è esattamente ciò che vogliamo. moment=moment indica di impostare una variabile moment uguale a require('moment'), ora quando il datapicker tenta di risolvere le librerie dalle globali, raggiunge la definizione var moment=.... Se prevedi di includere moment dai globali (non come dipendenza npm), devi omettere questo argomento.

Answer 4

trovato una soluzione più semplice qui: https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1319

La soluzione:

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') 
     } 
    } 
};