Установка и использование js-cookie-зависимости с npm в Laravel - PullRequest
Новая
       70

Установка и использование js-cookie-зависимости с npm в Laravel

1 голос
/ 30 октября 2019

Я пытался установить js-cookie (https://github.com/js-cookie/js-cookie), используя npm в моем проекте Laravel, но я продолжаю получать одно и то же ReferenceError: Cookies не определена ошибка. Она отлично работает с локальнымкопия js-cookie и через CDN, но я хотел бы выяснить, почему он не работает через npm.

Что я пробовал: 

npm i js-cookie  
npm i js-cookie --save  
npm i js-cookie --save-dev

, за которым следует 

npm run dev

Что я получаю в результате:
- js-cookie v 2.2.1 включается в мой package.json под зависимостями или devDependencies
- js-cookie появляется под node_mnodules
- ReferenceError: Cookies не определены при попытке использовать любые функции Cookies

Любая помощь будет принята с благодарностью!

Редактировать 1 - включая весь мой код
Мой master.blade.php выглядит следующим образом: 

<!DOCTYPE html>
<html>
    <head>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>@yield('title')</title>
        <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('css/nightmode-toggle.css') }}">
        <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/nightmode-toggle.js') }}"></script>
    </head>
    <body id="mybody">
        @include('layouts.navbar')
        <div class="content">
            @yield('content')
        </div>
    </body>
</html>

Содержимое nightmode-toggle.css - это всего лишь несколько классов, которые явключать и выключать при установке флажка «Ночной режим»: 

body.night {
  background:black;
  color:white;
}

.navbar.night {
  background-color:black;
  color:white;
}

etc...

Содержимое Nightmode-toggle.js: 

$(document).ready(function () {
    if (Cookies.get('nightmode-toggle') != 'on' && Cookies.get('nightmode-toggle') != 'off') {
        Cookies.set('nightmode-toggle', 'off');
    }

    if (Cookies.get('nightmode-toggle') == 'off' && $('body').hasClass('night')) {
        $('body').toggleClass('night');
        $('.navbar').toggleClass('night');
        etc...
    } else if (Cookies.get('nightmode-toggle') == 'on' && !$('body').hasClass('night')) {
        $('body').toggleClass('night');
        $('.navbar').toggleClass('night');
        etc...
    }

    $('#nightmode-toggle').click(function () {
        if (Cookies.get('nightmode-toggle') == 'off') {
            Cookies.set('nightmode-toggle', 'on');
            $('body', ).toggleClass('night');
            $('.navbar').toggleClass('night');
            etc...

        } else {
            Cookies.set('nightmode-toggle', 'off');
            $('body').toggleClass('night');
            $('.navbar').toggleClass('night');
            etc...
        }

        $.ajax({
            type: "POST",
            url: "/toggle",

            success: function () {
            },
            error: function () {
                alert('Could not switch to Night Mode for some reason! Please try again later.');
            }
        });
    })
});

Как я уже говорил ранее, если я включу локальный файл js-cookie.js в заголовок, например, 

<script type="text/javascript" src="{{ asset('js/js-cookie.js') }}"></script>

или если я включу CDN взаголовок, например, 

<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>

все работает отлично, куки записываются правильно и классы меняются в зависимости от куки. Но я действительно хочу выяснить, как включить js-cookie, используя npm, как указано разработчиком.

1 Ответ

1 голос
/ 30 октября 2019

Вам необходимо импортировать библиотеку в bootstrap.js или app.js как модуль ES6 согласно документам 

import Cookies from 'js-cookie'

Затем использовать ее где-нибудь еще, например 

Cookies.set('foo', 'bar')

Надеюсь, это поможет

...