$ (...). Datetimepicker ben <a href="https://webpack.github.io/" rel="noreferrer">webpack</a> kullanıp <a href="http://eonasdan.github.io/bootstrap-datetimepicker/" rel="noreferrer">bootstrap-datetimepicker</a> kullanmak istediğiniz bir işlev

Question

değildir. Benim webpack yapılandırma ben "jquery modülü" almak için ProvidePlugin kullanın. Ben $('#datetimepicker12').datetimepicker işlevini çağırdığınızda Benim kod

hatası $(...).datetimepicker is not a function olsun. Neden $ değişken 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')); 

tanımlanması gerektiğini datetimepicker işlevi içermiyor yok 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

Çözüm üzerinde pull request içinde çözmek olacağını yaklaşık hatası 404 olsun Github.

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

tam imorts yükleyici için bu argümanlar ne yapmalıyım: (kaynak düzenlemeden) $ kalıcı .fn için değişiklik yapma

Answer 2

# datetimepicker12 adresini kontrol etmeniz veya tarayıcınızda bulunmadığından emin olmanız gerekir. F12'yi tıklatıp ctrl + F tuşlarına basarak kimliği bulunuz. Ve herhangi bir hata jquery dosyası sayfanızda espacially datetime toplayýcýsýnýn js dosyası eksik başka bir yol da tüm js dosyaları umut üst kısmında söz konusu dosya file.put senin sorunun

Answer 3

Tek yön imports birlikte expose eklenti kullanmak mı?

Eğer kaynaktan bakın,

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

ile başlar ve daha sonra bu bölümü define=>false,exports=>false sarılmış modül tanımı içinde (hem define ve exports setleri JavaScript bir parça başa ekler

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

ilerler) tam olarak bizim istediğimiz şeydir "globalsi kullanmak" kısmında, geçmek için izin false, için. moment=moment o var moment=... tanımına ulaşır datepicker globalsin gelen kütüphaneleri çözümlemeye çalışırken şimdi, require('moment') eşit bir değişken moment ayarlamak için söyler. Eğer (değil npm bağımlılık gibi) globaller gelen moment eklemeyi planlıyorsanız, bu bağımsız değişkeni ihmal edilmelidir.

Answer 4

burada daha basit bir çözüm Bulunan: https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1319

çözüm:

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