编译 Laravel、Webpack 和 Sparkline 的问题答案

【问题标题】：Issues compiling Laravel, Webpack and Sparkline编译 Laravel、Webpack 和 Sparkline 的问题
【发布时间】：2019-10-31 13:34:01
【问题描述】：

我正在尝试使用 Laravel Mix 在我的 Laravel 5.8 项目中实现 Sparkline JavaScript package。 Sparkline 将不显示，并且出现以下浏览器控制台错误。

未捕获的 ReferenceError：未定义迷你图。

我没有正确调用它。

这是我的步骤：

使用 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"

使用 npm run dev 运行 webpack，生成资产：./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

【问题讨论】：

import 不会全局导入，只会在您导入的文件中导入。尝试使用window.sparkline = sparkline 使其全球化。您不需要将其实际添加到 .mix 文件中

标签： javascript laravel npm webpack laravel-mix

【解决方案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 文件顶部的标题中。

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

【讨论】：

一旦出现 webpack (.copy()) 和刀片模板更改，似乎 bootstrap.js 更改是不必要的。你知道为什么吗？
我删除了那个步骤。我曾希望 copy() 不是必需的，我们可以通过 bootstrap.js 加载迷你图库，但这不起作用。我可以让它工作的唯一方法是使用 .copy()。 :( 抱歉。
不需要道歉。您的方法确实可以正常工作。感谢您提供的帮助和大量工作。

【解决方案2】：

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

使用 npm 安装 sparkline 包

    npm install @fnando/sparkline --save-dev

在我的 ./resources/js/app.js 中包含一个导入并将其与窗口相关联

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

使用 npm run [dev|production] 运行 webpack，生成资产：./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=""> 加载它更可取。

【讨论】：