Webpack ES6模塊 - fancyBox/tagsInput不是一個函數 - 庫導入

我想加載一些庫，fancyBox和tagsInput，這兩個都依賴於jquery，進入我的webpack捆綁es6模塊。Webpack ES6模塊 - fancyBox/tagsInput不是一個函數 - 庫導入

在myFile.js，我有

import $ from 'jquery'; 

import './../..vendor/jquery.fancybox.js';

我的文件結構如下..

/node_modules 
/frontend 
    index.js 
    /components 
     /myFolder 
     myFile.js 
    /vendor 
     jquery.fancybox.js

然而，我收到以下錯誤

Uncaught TypeError: (0 , _jquery2.default)(...).fancybox is not a function

以下所以看起來fancybox無法將自己附加到jquery對象上？我想在下面我的WebPack配置使用進口裝載機進行整治..

const webpack = require('webpack'); 
const path = require('path'); 
const precss = require('precss'); 
const autoprefixer = require('autoprefixer'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const postcssImport = require('postcss-import'); 

module.exports = { 

    context: __dirname + '/frontend', 
    devtool: 'source-map', 
    entry: { 
    app: './index.js', 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, './static'), 
    }, 
    module: { 
    loaders: [ 
    { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } }, 
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&importLoaders=1!postcss') }, 
    { test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, loader: 'imports?this=>window' }, 
    { test: /vendor\/.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }, 
    ], 
    }, 
    plugins: [ 
    new ExtractTextPlugin('si-styles.css'), 
    ], 
    postcss: function(webpack) { 
    return [ 
     postcssImport({ addDependencyTo: webpack }), // Must be first item in list 
     precss, 
     autoprefixer({ browsers: ['last 2 versions'] }), 
    ]; 
    }, 

};

任何想法上，這將受到歡迎。

來源

2016-06-29 matt-p

在我的webpack.config.js中提供使用webpack.ProvidePlugin的jquery，並從myFile中刪除'import jquery'似乎已經解決了這個問題。新的webpack.ProvidePlugin（{jquery， jQuery：「jquery」， }） –

在我的webpack.config.js中使用webpack.ProvidePlugin提供jquery，並從myFile中刪除'import jquery'似乎解決了這個問題。

new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
    })

來源

2016-06-29 14:12:53

Webpack ES6模塊 - fancyBox/tagsInput不是一個函數 - 庫導入

回答

相關問題