Verwendung jquery-ui mit webpack eine bestimmte Dateistruktur mit

Question

Ich mag würde, Ihnen zu helfen/schlagen die beste Art und Weise picker von jquery-ui verwenden Sie die folgende Datei Struktur:

-single_pages 
    -admin 
    -admin.js 
    -webpack.config.js 
    -common 
    -DatesFilter 
     -DatesFilter.js 
    -node_modules 
    -package.json 

ich bereits installiert jquery-ui

Meine webpack.config.js Datei ist:

var path = require('path'); 
var webpack = require("webpack"); 

module.exports = { 
    resolve: { 
    alias: { 
     'jquery': require.resolve('jquery'), 
    }, 
    root: [ 
     path.resolve(__dirname, './../admin'), 
     path.resolve(__dirname, './../common') 
    ], 
    extensions: ['', '.js'], 
    fallback: path.resolve(__dirname, './../node_modules') 
    }, 
    resolveLoader: { 
    fallback: path.resolve(__dirname, './../node_modules') 
    }, 
    entry: './index.js', 
    output: { 
    filename: 'bundle.js', 
    publicPath: "/" 
    }, 
    externals: { 
     // require("jquery") is external and available 
     // on the global var jQuery 
     "jquery": "jQuery" 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     "$":"jquery", 
     "jQuery":"jquery", 
     "window.jQuery":"jquery" 
    }) 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: [ 
      path.resolve(__dirname, './') 
     ], 
     loader: "babel-loader" 
     }, 
     { 
     test: /\.js$/, 
     include: path.resolve(__dirname, './../common'), 
     babelrc: false, 
     loader: require.resolve('babel-loader'), 
     query: { // load the same presets as in the .babelrc file, but in a way that resolves in the parent directory 
      presets: [require.resolve('babel-preset-es2015'),  require.resolve('babel-preset-react'), 
     require.resolve('babel-preset-stage-0')] 
     } 
     } 
    ] 
    } 
}; 

ich React.js bin mit.

Ich importiere DatesFilter.js innerhalb admin.js. Ich kann die Komponente sehen. Das Problem kommt, wenn ich den Datepicker benutzen will.

DatesFilter.js verwendet datepicker von jquery-ui

Ich verwende: import { datepicker } from 'jquery-ui' innen DatesFilter.js aber es sagt immer TypeError: $(...).datepicker is not a function

Was kann ich tun?

Danke

Answer 1

nur versuchen, das Modul zu importieren, finden Sie auf diesen Link jquery-ui-and-webpack-how-to-manage-it-into-module

in Ihrem Fall würden Sie import "jquery-ui/ui/widgets/datepicker"