如何在 webpack 中使用 chart.js

Question

我在 webpack 中使用 chart.js。当运行终端中的 webpack 没问题，但在控制台中显示错误：

"Uncaught ReferenceError: Chart is not defined"

require(['jquery', 'chartjs'], function($, chartjs) {
console.log('aaaaaaaa');

var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets :
     [
        {
          fillColor : "rgba(172,194,132,0.4)",
          strokeColor : "#ACC26D",
          pointColor : "#fff",
          pointStrokeColor : "#9DB86D",
          data : [203000,15600,99000,25100,30500,24700]
        }
     ]
    }

    var rice = document.getElementById('myChart').getContext('2d');
    new Chart(rice).Line(riceData);
});

Answer 1

您将变量名称 chartjs 赋予 require.js 的回调，但您尝试在倒数第二行使用 Chart 引用 chartjs。您需要做的是确定命名约定：

require(['jquery', 'chartjs'], function($, Chart) {
console.log('aaaaaaaa');

var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets :
     [
        {
          fillColor : "rgba(172,194,132,0.4)",
          strokeColor : "#ACC26D",
          pointColor : "#fff",
          pointStrokeColor : "#9DB86D",
          data : [203000,15600,99000,25100,30500,24700]
        }
     ]
    }

    var rice = document.getElementById('myChart').getContext('2d');
    new Chart(rice).Line(riceData);
});

Answer 2

问题已通过将 require 更改为 define 解决，而且您还应该使用 npm 包管理器。

define(['jquery', 'chartjs'], function($, chartjs) {

var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets :
     [
        {
          fillColor : "rgba(172,194,132,0.4)",
          strokeColor : "#ACC26D",
          pointColor : "#fff",
          pointStrokeColor : "#9DB86D",
          data : [203000,15600,99000,25100,30500,24700]
        }
     ]
    }

    var rice = document.getElementById('myChart').getContext('2d');
    new Chart(rice).Line(riceData);
});

如何在 webpack 中使用 chart.js

how to use chart.js in webpack

javascript

requirejs

webpack