我正在尝试实现 Sparkline JavaScript package在我的 Laravel 5.8 项目中使用 Laravel Mix。迷你图不会显示，我收到以下浏览器控制台错误。
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"
使用 npm run dev 运行 webpack 生成 Assets :./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
最佳答案
将 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');
编译您的 Assets 。
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>
关于javascript - 编译 Laravel、Webpack 和 Sparkline 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56640085/