图表未在带有 webpacker 的 Rails 6 视图页面中定义

Question

我正在尝试找出在使用 webpacker 的 Rails 6 应用程序中使用来自 chart.js 的 Chart 的正确方法。我希望我的图表生成 javascript 代码保留在页面中，因为我将从视图中动态生成它。

我从

开始

yum add chartjs

然后添加到应用程序包中（javascript_pack_tag 在我的 application.html.erb 中）

// app/javascript/packs/application.js
import Chart from "chartjs";

然后，在一个视图中，我尝试使用该库：

  <div class="row">
    <div class="col">
      <canvas id="backlog-chart" width="100%" height="400px">
      <script>
        var ctx = document.getElementById('backlog-chart').getContext('2d');
        new Chart(ctx, { ...

此操作失败并出现 Chart is not defined javascript 错误。

我尝试过的事情：

application.js 中包含库的 require("chartjs") 形式似乎没有任何影响。
我尝试使用 Chart: "chartjs/chart.js" 添加 config/webpack/environment.js 到 ProvidePlugin 对象，但没有任何变化。
并且我尝试将 import Chart from "chart.js" 直接添加到视图中的 <script> 部分，但这失败并在浏览器上出现 "import only allowed in module" 错误。

我的 javascript 技能绝对跟不上最近几年的新技术，因此，如果您能提出正确的方法，我们将不胜感激。

Answer 1

您不能在 HTML 主体的脚本中使用 Chart，因为 Chart 尚未全局定义。您可以通过嵌入脚本标签来导入 chart.js javascript，然后 Chart 就可用了。但是你说你想用Webpacker，所以...

在 application.js 中包含您的图表定义，而不是在脚本标记中。

// app/javascript/packs/application.js
import Chart from "chartjs";

var ctx = document.getElementById('backlog-chart').getContext('2d');
var myChart = new Chart(ctx, {...});

这将针对您 HTML 中的 canvas：

<canvas id="backlog-chart" ... />

图表未在带有 webpacker 的 Rails 6 视图页面中定义

Chart is not defined in a Rails 6 view page with webpacker

ruby-on-rails

webpack

webpacker