Включите сову карусели в проект npm. Все пути - PullRequest
Новая
       14

Включите сову карусели в проект npm. Все пути

0 голосов
/ 05 июля 2018

Давно хотел использовать owl-carousel , но никак не может подключить его через npm webpack.

Официальный сайт npm wroted

Добавьте jQuery через "webpack.ProvidePlugin" в ваш веб-пакет Конфигурация: 

const webpack = require('webpack');

//...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
],
//...

У меня есть этот конфиг уже в моем webpack файле конфигурации

Загрузите необходимую таблицу стилей и JS: 

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

Попробуйте оцепенеть 1

В такой конфигурации ( изменить только CSS-файл на scss ) У меня следующая ошибка

Невозможно прочитать свойство 'fn' из неопределенного

Попробуйте номер 2

Включить также, как это не работает. 

import 'imports?jQuery=jquery!owl.carousel';

Я получил следующую ошибку Module not found: Error: Can't resolve 'imports' in 'D:\master\my path '

Попробуйте номер 3 

import owlCarousel from "owl.carousel";

Ошибка как при первой попытке

My webpack.config.js 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');

let conf = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "[name]bundle.js",
        publicPath: "dist/"
    },
    devServer: {
        overlay:true
    },
    module: {
        rules: [
            {
                test: /\.js/,
                loader:"babel-loader",
            },
            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: 'css-loader',
                            options: { 
                                url: false,
                                minimize: true,
                                sourceMap: true
                            }
                        }, 
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                      ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "[name].css"
        }),
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "build/index.html",
            hash: true,
            chunks: ["index"]
        }),

        new webpack.ProvidePlugin({
            '$': "jquery",
            'jQuery': "jquery",
            'Popper': 'popper.js',
            "Bootstrap": "bootstrap.js"
        })
    ]
};

module.exports = (env, options) => {

    let production = options.mode === "production";

    conf.devtool = production ? false : "eval-sourcemap";

    return conf;
}

В моем проекте у меня есть 2 пакета

index.js 

import $ from "jquery";
import jQuery from "jquery";

import "../styles/main/main.scss";
import "normalize.scss/normalize.scss";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

 //in here including  owl-config where I config my owl carousel

import * as owlConfig from "./owl-config";

//after this more js code's

И второй owl-config.js Все три я делаю в этом файле

Мои зависимости 

"dependencies": {
    "bootstrap": "^4.1.1",
    "normalize.scss": "^0.1.0",
    "owl.carousel": "^2.2.0",
    "jquery": "^3.3.1",
    "popper": "^1.0.1"
}

1 Ответ

0 голосов
/ 05 июля 2018

Проблема была в том, что я неправильно сделал то, что написал в документации 

//...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
],
//...

Что было в моем webpack.config.js 

new webpack.ProvidePlugin({
            '$': "jquery",
            'jQuery': "jquery",
            'Popper': 'popper.js',
            "Bootstrap": "bootstrap.js"
        })

Как мне поменять и работать 

new webpack.ProvidePlugin({
            '$': "jquery",
            'jQuery': "jquery",
            'window.jQuery': 'jquery',
            'Popper': 'popper.js',
            "Bootstrap": "bootstrap.js"
        })
...