Question

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

未捕获的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

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文件顶部的标头中。

    <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中包含一个导入并将其与窗口关联

    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="">加载它更好。

编译Laravel，Webpack和Sparkline的问题

2 个答案: