Webpack ES6 模块 - fancyBox / tagsInput 不是函数 - 库导入答案

【问题标题】：Webpack ES6 Module - fancyBox / tagsInput is not a function - library importWebpack ES6 模块 - fancyBox / tagsInput 不是函数 - 库导入
【发布时间】：2016-11-01 06:04:58
【问题描述】：

我正在尝试加载几个库，fancyBox 和 tagsInput，它们都依赖于 Jquery，到我的 webpack 捆绑的 es6 模块中。

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

};

我们将不胜感激地收到任何关于此的想法。

【问题讨论】：

在我的 webpack.config.js 中使用 webpack.ProvidePlugin 提供 jquery，并从 myFile 中删除 'import jquery' 似乎已经解决了这个问题。 new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", })

标签： jquery ecmascript-6 webpack

【解决方案1】：

在我的 webpack.config.js 中使用 webpack.ProvidePlugin 提供 jquery，并从 myFile 中删除 'import jquery' 似乎已经解决了这个问题。

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

【讨论】：