如何将Chart.js作为本地文件引入并解决相关报错问题？

你遇到的问题是因为下载的chart.js是ES模块版本，而浏览器默认将普通<script>标签当作非模块脚本处理，导致里面的import语句报错；同时因为模块不会暴露全局变量，所以出现Chart is not defined的错误。以下是两种可行的本地引入方案：

方案一：使用UMD格式的Chart.js（推荐，和Flot.js引入方式一致） #

Chart.js提供了UMD格式的文件，这种格式支持直接作为普通脚本引入，会自动将Chart挂载到全局window对象上，和你之前用Flot.js的方式完全兼容：

1. 从GitHub的release包中找到package/dist/chart.umd.js（或压缩版chart.umd.min.js），将其放到你的项目目录中
2. 用普通脚本标签引入：

   <script language="javascript" type="text/javascript" src="path/to/chart.umd.js"></script>
   

3. 之后直接使用文档中的Hello World代码即可，Chart会作为全局变量存在，不会再出现未定义的错误。

方案二：以ES模块方式引入（适合现代模块化项目） #

如果你想使用ES模块版本的chart.js，需要修改脚本标签的类型，并调整业务代码的写法：

1. 引入时给<script>标签添加type="module"属性：

   <script type="module" src="path/to/chart.js"></script>
   

2. 你的业务代码也需要写成模块形式，比如单独创建一个脚本文件（如app.js），通过import获取Chart：

   // app.js
   import { Chart } from './chart.js';
   // 然后写Hello World代码
   const ctx = document.getElementById('myChart');
   new Chart(ctx, { /* 配置项 */ });
   

3. 在HTML中引入业务脚本时也要加type="module"：

   <script type="module" src="app.js"></script>
   

关于你对模块文件的困惑 #

你下载的chart.js确实是ES模块的顶层文件，但浏览器只有在脚本标签声明type="module"时，才会将其当作模块解析，允许使用import语句。普通脚本标签下，浏览器会把它当作传统的非模块代码，这时候import语法就会触发语法错误。

内容的提问来源于stack exchange，提问作者Borea Deitz