Проблемы компиляции Laravel, Webpack и Sparkline - PullRequest
Новая
       12

Проблемы компиляции Laravel, Webpack и Sparkline

1 голос
/ 18 июня 2019

Я пытаюсь реализовать пакет Sparkline JavaScript в моем проекте Laravel 5.8 с помощью Laravel Mix.Sparkline не будет отображаться, и я получаю следующую ошибку консоли браузера.

Uncaught ReferenceError: sparkline не определен.

Я не вызываю его должным образом.

Вот мои шаги:

Установите пакет sparkline с npm 

npm install @fnando/sparkline --save-dev

и подтвердите, что пакет присутствует в node_modules (node_modules/@fnando/sparkline)

Добавитьзапись в мой webpack.mix.js: 

mix.js([
    'resources/js/app.js',
    'node_modules/@fnando/sparkline'
    ],'public/js');

Включить импорт в мой ./resources/js/app.js: 

import sparkline from "@fnando/sparkline"

Запустить веб-пакет с npm run dev, который производит активы: ./public/js/app.js.

Они указаны в моем главном блэйд-макете следующим образом: 

[.. snip ..]
        <script src="{{ asset('js/resources.js') }}"></script>
        <script src="{{ asset('js/semantic.js') }}"></script>
        <script src="{{ asset('js/app.js') }}"></script>

        <script>
        $('.ui.dropdown').dropdown();
        $('.ui.sticky').sticky({
            offset: 50,
            context: '#content'
        });

        @stack('inline_scripts')
        </script>
    </body>
</html>

Наконец, я пытаюсь отобразить спарклайн в моем клинке следующим образом: 

@extends('layouts.master')

@section('content')

<div class="ui secondary segment">
    <h4>Sparklines!</h4>
    <div class="ui two column centered grid">
        <div class="column">
            <svg class="sparkline" width="100" height="30" stroke-width="3"></svg>
        </div>
    </div>

</div>

@push('inline_scripts')
sparkline.sparkline(document.querySelector(".sparkline"), [1, 5, 2, 4, 8, 3, 7]);
@endpush

@endsection

Ответы [ 2 ]

1 голос
/ 18 июня 2019

Установите плагин jQuery Sparklines в качестве пакета NPM. 

npm install @fnando/sparkline

Измените файл Webpack. 

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('node_modules/@fnando/sparkline/dist/sparkline.js', 'public/js');

Скомпилируйте ваши активы. 

npm run production

TheТеперь пакет будет скомпилирован в /public/js/app.js для использования в вашем шаблоне Blade, поместите его в заголовок к верхней части файла Blade. 

    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ mix('js/sparkline.js') }}"></script>
</head>
<body>

<svg class="sparkline" width="100" height="300" stroke-width="3"></svg>
<script>
    sparkline.sparkline(document.querySelector(".sparkline"), [1, 5, 2, 4, 8, 3, 7]);
</script>
</body>
</html>
0 голосов
/ 20 июня 2019

С помощью проекта автор я обнаружил, что работает следующее:

Установить пакет sparkline с npm 

    npm install @fnando/sparkline --save-dev

Включите импорт в my ./resources/js/app.js и свяжите его с окном 

    import sparkline from "@fnando/sparkline"
    window.sparkline = sparkline

Запустите веб-пакет с npm run [dev|production], который производит активы: ./public/js/app.js.

Ссылался на это в моем главном макете, как показано ниже: 

[.. snip ..]
        <script src="{{ asset('js/resources.js') }}"></script>
        <script src="{{ asset('js/app.js') }}"></script>

        <script>
            @stack('inline_scripts')
        </script>
    </body>
</html>

Наконец, изобразите спарклайн в моем клинке так: 

    @extends('layouts.master')

    @section('content')

    <div>
        <h4>Sparklines!</h4>
        <div class="column">
            <svg class="sparkline" width="100" height="30" stroke-width="3"></svg>
        </div>
    </div>

    @push('inline_scripts')
        sparkline.sparkline(document.querySelector(".sparkline"), [1, 5, 2, 4, 8, 3, 7]);
    @endpush

    @endsection

Нет необходимости вносить изменения в webpack.mix.js, изменения app.js появляются для импорта и ... вызова (?) Пакета. Я не знаю почему, но я хотел бы знать.

Это существенно отличается от предыдущего ответа тем, что он связывает пакет JavaScript в мой скомпилированный app.js, что может быть предпочтительнее, чем просто обслуживать распределенные .js локально и загружать его с <script src="">.

...