Javascript Webpack:无法加载具有全局jQuery的slick插件

我正在尝试加载版本2.6.1，但到目前为止没有成功

我需要将jquery作为全局变量和2.2.4版加载（因为我还有其他旧插件要管理），所以我在我的webpack.config.js文件中设置了ProvidePlugin：

const webpack = require('webpack');
const nodeEnv = process.env.NODE_ENV || 'production';

module.exports = {
  devtool: 'source-map',
  entry: { filename: './src/js/main.js' },
  output: { filename: './dist/js/bundle.js' },
  module: {
    loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery'
    }),

    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
    })
  ]
};

我的main.js文件如下：

import 'slick-carousel';
console.log('jquery version: ', $.fn.jquery);
console.log($.fn.slick);

bundle.js文件由webpack生成，日志如下：

Version: webpack 2.6.1
Time: 1490ms
                  Asset    Size  Chunks                    Chunk Names
    ./dist/js/bundle.js  616 kB       0  [emitted]  [big]  filename
./dist/js/bundle.js.map  794 kB       0  [emitted]         filename
   [0] ./~/jquery/dist/jquery.js 258 kB {0} [built]
   [1] ./~/slick-carousel/slick/slick.js 84.3 kB {0} [built]
   [2] ./src/js/main.js 1.52 kB {0} [built]
   [3] ./~/slick-carousel/~/jquery/dist/jquery.js 268 kB {0} [built]

jQuery被加载了两次：第一次是在全局环境中，版本2.2.4，第二次是版本3.2.1（我不想让这个版本对我来说太新了），我猜它是由slick作为依赖项包含的

将其加载到html页面中，我在浏览器开发工具中获得以下日志：

jquery version: 2.2.4
undefined

因此，jquery加载正确，但slick没有

我错过了什么

---

谢谢你

问题出在我的包上。json：我在依赖项属性中使用了光滑的旋转木马，而在devdependency中使用了jquery

---

将jquery移动到依赖项中解决了我的问题。

问题是我的包。json：我在依赖项属性中使用了光滑的旋转木马，而jquery在devdependency中使用

---

在依赖项中移动jquery解决了我的问题。

我找到了适合我的解决方案：

添加到

js

文件：

import $ from 'jquery';
import 'slick-carousel';

$slick-font-path: "/node_modules/slick-carousel/slick/fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "/node_modules/slick-carousel/slick-carousel/slick/" !default;
$slick-arrow-color: black !default;
@import "~slick-carousel/slick/slick.scss"; 
@import "~slick-carousel/slick/slick-theme.scss";

添加到

scss

文件：

import $ from 'jquery';
import 'slick-carousel';

$slick-font-path: "/node_modules/slick-carousel/slick/fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "/node_modules/slick-carousel/slick-carousel/slick/" !default;
$slick-arrow-color: black !default;
@import "~slick-carousel/slick/slick.scss"; 
@import "~slick-carousel/slick/slick-theme.scss";

---

我找到了适合我的解决方案：

添加到

js

文件：

import $ from 'jquery';
import 'slick-carousel';

$slick-font-path: "/node_modules/slick-carousel/slick/fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "/node_modules/slick-carousel/slick-carousel/slick/" !default;
$slick-arrow-color: black !default;
@import "~slick-carousel/slick/slick.scss"; 
@import "~slick-carousel/slick/slick-theme.scss";

添加到

scss

文件：

import $ from 'jquery';
import 'slick-carousel';

$slick-font-path: "/node_modules/slick-carousel/slick/fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "/node_modules/slick-carousel/slick-carousel/slick/" !default;
$slick-arrow-color: black !default;
@import "~slick-carousel/slick/slick.scss"; 
@import "~slick-carousel/slick/slick-theme.scss";