Question

仍然试图掌握NPM并遇到一些障碍。

当我使用CDN过程时，我的光滑旋转木马效果很好。但是我在NPM中做了所有事情，所以我觉得我应该对这个插件做同样的事情，但似乎无法让它发挥作用。

安装：

＆＃13;

npm install slick-carousel --save

＆＃13;

哪个添加到我的package.json文件中：

＆＃13;

  "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"
  }

＆＃13;

我足够聪明，知道我需要在index.js文件中要求该文件：

＆＃13;

var $ = require('jquery');

require("../css/style.css");
require("font-awesome-webpack");
require("slick-carousel");

＆＃13;

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

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

＆＃13;

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

＆＃13;

这就是它破裂的地方。 slick.css文件加载，基本的slick-carousel现在在我的html输出中工作。但是，光滑的主题文件通过推送此错误来打破所有内容：

＆＃13;

./~/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)

＆＃13;

这让我觉得我的webpack.config.js中打破了一些东西：

＆＃13;

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"
          }
      ]
    }

};

＆＃13;

在使用NPM和webpack进行构建时，我可以使用一些最好的方法来使用光滑的轮播。这么多活动的部分，当我认为我得到它时，这就出现了，我花了7个小时试图解决它，然后寻求帮助。

非常感谢任何帮助。

Answer 1

我遇到了同样的问题，但我并不想在我的项目中更改光滑的旋转木马，所以我迟到了一个月，但这就是我解决它的方法：

首先安装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则是您的集成。

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

使用Slick-Carousel和NPM

2 个答案: