使用 Slick-Carousel 和 NPM

Question

仍在努力掌握 NPM 并遇到一些障碍。

当我使用 CDN 流程时，我的 slick-carousel 效果很好。但我在 NPM 中做所有事情，所以我想我应该对这个插件做同样的事情，但似乎无法让它落地。

运行安装：

npm install slick-carousel --save

这会添加到我的 package.json 文件中：

  "devDependencies": {
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.11.0",
    "html-webpack-plugin": "^2.21.0",
    "img-loader": "^1.3.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "font-awesome-webpack": "0.0.4",
    "jquery": "^3.0.0",
    "slick-carousel": "^1.6.0"
  }

我很聪明，知道我需要在我的 index.js 文件中使用该文件：

var $ = require('jquery');

require("../css/style.css");
require("font-awesome-webpack");
require("slick-carousel");

我可以看到我现在拥有用于 slick-carousel 的所有 jQuery，但没有 css。

现在我想我应该需要 node_modules 文件夹中的两个 .css 文件：

require("slick-carousel/slick/slick.css");
require("slick-carousel/slick/slick-theme.css");

这就是一切都破裂的地方。 slick.css 文件加载，基本的 slick-carousel 现在在我的 html 输出中工作。但是 slick-theme 文件通过推送此错误来破坏一切：

./~/slick-carousel/slick/ajax-loader.gif
Module parse failed: /Users/ryanbuchholtz/Documents/thinkful/haventower/node_modules/slick-carousel/slick/ajax-loader.gif Unexpected character '' (1:7)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:7)

这让我觉得我的 webpack.config.js 出了点问题：

var path = require('path');
var packageData = require('./package.json');
var filename = [packageData.name, packageData.version, 'js'];

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');



var plugins = [
    new HtmlWebpackPlugin({
      inject: 'head',
      template: 'index.html',
      minify: {
        "collapseWhitespace": true, 
        "removeComments": true, 
        "removeRedundantAttributes": true, 
        "removeScriptTypeAttributes": true, 
        "removeStyleLinkTypeAttributes": true
      }
    }),
    new ExtractTextPlugin('style.css')
  ];

module.exports = {
    entry: {
      main: [
        path.resolve(__dirname, packageData.main)
      ]
    },

    output: {
        path: path.resolve(__dirname, 'build'),
        filename: filename.join('.'),
    },
    devtool: 'source-map',
    plugins: plugins,
    module: {
      loaders: [
        { 
          test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "file-loader")
        },
        { test: /\.(jpe?g|png|gif|svg)$/, loader: "file-loader"
        },
        {   test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff"
          },
        {   test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"
          }
      ]
    }

};

在 NPM 和 webpack 中构建时，我真的可以使用一些帮助以最佳方式使用 slick-carousel。如此多的移动部件，当我觉得我明白时，它就会出现，我花了 7 个小时试图修复它，然后才寻求帮助。

非常感谢任何帮助。

Answer 1

我遇到了同样的问题，但我不想在我的项目中更改 slick-carousel，所以晚了一个月，但我是这样解决的：

先安装Webpack image-loader:

$ npm install image-webpack-loader --save-dev

然后更改这些行（在您的 webpack 配置中）：

loaders: [{ 
          test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "file-loader")
        },
        {  
           test: /\.(jpe?g|png|gif|svg)$/i,
           loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
           ]
        },
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"
 }]

这将为图像加载器更改文件加载器（您用于加载图像的内容），它将知道如何编译 .gif 文件和其他格式。

有关这方面的其他信息，您可以查看github page

另外，如果您使用ReactJS，请不要直接使用 slick-carousel，因为由于 JQuery 依赖，它使用直接 DOM 操作，现在我使用 react-slick 非常稳定并且有很酷的选项，例如设置基于响应式布局自定义上一个和下一个箭头等。

希望对你有帮助

Answer 2

require("slick-carousel/slick/slick.css");
require("slick-carousel/slick/slick-theme.css");

据我了解，您不需要这两个 - 只有一个。 Slick-theme 是默认的 CSS，而 Slick 是您集成的。

我可能是错的（我真的是开发新手）但我的初始配置没有问题！