非模块环境下使用ChartJS报错，寻求chart.umd.js文件获取途径

嗨，我完全懂你现在的困扰——在AWS隔离子网这种离线环境里用Chart.js，刚引入chart.min.js就碰到了模块语法的报错，还找不到需要的chart.umd.js对吧？别慌，给你说几个靠谱的获取方式：

• 从Chart.js官方发布包提取：你可以去Chart.js的GitHub发布页面，找到最新的稳定版本下载压缩包。解压后进入dist文件夹，就能找到chart.umd.js和它的压缩版chart.umd.min.js，这两个都是专门为非模块环境打造的，引入后不会出现import语句的问题。

• 通过npm本地安装后复制：如果你的开发环境能临时联网（或者支持离线安装npm包），可以在本地执行命令：

  npm install chart.js
  

  安装完成后，去node_modules/chart.js/dist目录下就能找到umd格式的文件，把它复制到你的项目静态资源目录里就能用了。

另外给你调整一下使用示例，确保能正常运行：

<html>
<body>
<div>my contents</div>
<!-- 别忘了加canvas元素，Chart.js需要它来渲染图表 -->
<canvas id="myChart"></canvas>
<script src="/static/defapp/js/chart.umd.min.js"></script>
<script>
// 先获取canvas的上下文
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // 这里可以换成你需要的图表类型
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
</body>
</html>

umd版本会在全局环境暴露Chart对象，正好适配你的非模块离线场景，替换之后应该就能正常运行了。

备注：内容来源于stack exchange，提问作者whitebear