Verwendung von Slick-Carousel und NPM

Question

Immer noch versucht, NPM zu meistern und einige Straßensperren zu treffen.

Mein Slick-Karussell funktioniert gut, wenn ich den CDN-Prozess verwende. Aber ich mache alles in NPM, also dachte ich mir, dass ich das gleiche mit diesem Plug-in machen sollte, aber ich kann es scheinbar nicht auf den Boden bringen.

Ran die Installation:

npm install slick-carousel --save

Welche meiner package.json Datei fügt hinzu:

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

Ich bin intelligent genug, um zu wissen, dass ich die Datei in meinem index.js-Datei benötigen müssen:

var $ = require('jquery'); 
 

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

Ich sehe, dass ich jetzt alle jQuery für Slick-Karussell, aber keiner von der CSS haben. Jetzt

Ich denke, ich sollte die beiden CSS-Dateien benötigen im Ordner node_modules leben:

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

Und das ist, wo es alle Pausen. Die slick.css-Datei lädt und das grundlegende Slick-Karussell funktioniert jetzt in meiner HTML-Ausgabe. Aber die Slick-Design-Datei bricht alles durch diesen Fehler drängen:

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

Das macht mich denken, etwas in meinem webpack.config.js gebrochen:

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

 
};

Ich könnte wirklich einige Hilfe in der besten Weise verwenden, um Slick-Caro zu verwenden Nützlich beim Bauen in NPM und mit Webpack. So viele bewegliche Teile und, wenn ich irgendwie denke, dass ich es bekomme, kommt das mit und ich verbringe 7 Stunden damit es zu reparieren, bevor ich um Hilfe frage.

Jede Hilfe wird sehr geschätzt.

Answer 1

hatte ich das gleiche Problem, aber ich wollte nicht Slick-Karussell in meinem Projekt ändern, so dass man Monat zu spät, aber hier ist, wie ich es gelöst:

Installieren Sie zuerst Webpack image-loader:

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

Dann diese Zeilen (in Ihrer webpack Konfiguration) ändern:

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

Diese Datei-loader ändern für Bild-Lader (was Sie für das Laden von Bildern verwenden), es wi Ich weiß, wie man .gif-Dateien und andere Formate kompiliert.

Für weiterführende Informationen über diese, können Sie das auch github page

überprüfen, wenn Sie ReactJS, verwenden nicht direkt verwenden Slick-Karussell, weil es es jetzt direkt DOM-Manipulation durch JQuery Abhängigkeit verwendet verwende react-slick ist sehr stabil und hat coole Optionen wie Einstellungen basierend auf responsive Layout benutzerdefinierte prev und nächste Pfeile und mehr.

Ich hoffe, es hilft Ihnen