编译 Laravel、Webpack 和 Sparkline 的问题

Question

我正在尝试使用 Laravel Mix 在我的 Laravel 5.8 项目中实现 Sparkline JavaScript package。迷你图不会显示，我收到以下浏览器控制台错误。

Uncaught ReferenceError: sparkline is not defined.

我没有正确调用它。

这是我的步骤：

使用 npm 安装 sparkline 包

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"

运行 webpack with npm run dev 生成资产：./public/js/app.js.

它们在我的主布局中被引用 blade 像这样：

[.. 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>

最后，我尝试在 blade 中渲染迷你图，如下所示：

@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

Answer 1

安装 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

包现在将被编译成 /public/js/app.js 以便在您的 Blade 模板中使用；把它放在 Blade 文件顶部的 header 中。

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

Answer 2

在项目 author 的帮助下，我发现以下工作：

使用 npm 安装 sparkline 包

    npm install @fnando/sparkline --save-dev

在我的 ./resources/js/app.js 中包含一个导入并将其与 window

相关联

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

运行 webpack with npm run [dev|production] 生成资产：./public/js/app.js.

在我的主布局中引用了这些 blade 像这样：

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

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

最后，在我的 blade 中渲染迷你图，如下所示：

    @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="">.

编译 Laravel、Webpack 和 Sparkline 的问题

Issues compiling Laravel, Webpack and Sparkline

javascript

npm

laravel

webpack

laravel-mix