GitHub NIFTI-Reader-JS测试报错：Uncaught ReferenceError: nifti未定义

问题根源 #

仓库自带的canvas.html/browser.html测试文件依赖全局暴露的nifti对象，但现代浏览器的安全限制、脚本加载方式不匹配，以及直接用file://协议打开HTML的跨域问题，共同导致了全局变量未初始化的错误。你尝试的import和require方式不匹配原脚本的输出格式，所以无法生效。

具体修复步骤 #

1. 校验脚本加载路径 #

打开tests/canvas.html，找到第一个<script>标签，确认其src属性指向正确的nifti-reader.js路径：

<script src="../release/current/nifti-reader.js"></script>

如果你的目录结构是克隆后的根目录下包含tests和release文件夹，这个路径是正确的；如果路径错误，修正为对应的相对路径即可。

2. 用本地HTTP服务器运行测试 #

直接双击HTML文件用file://协议打开会触发浏览器安全限制，导致脚本无法正常加载。必须用本地HTTP服务器访问：

• 若安装了Node.js，先全局安装http-server：

  npm install -g http-server
  

  进入仓库根目录后启动服务器：

  http-server -p 8080
  

• 若用Python（Python3自带服务模块）：

  python -m http.server 8080
  

  最后在浏览器访问http://localhost:8080/tests/canvas.html，再选择NIfTI文件测试即可。

3. 适配ES模块导入（可选） #

如果nifti-reader.js是ES模块格式（文件内包含export关键字），需要修改测试文件的脚本加载逻辑：

• 将第一个<script>标签改为模块类型：

  <script type="module" src="../release/current/nifti-reader.js"></script>
  

• 把第二个<script>标签也改成模块类型，并手动导入nifti对象：

  <script type="module">
    import * as nifti from '../release/current/nifti-reader.js';
    // 原测试文件的逻辑（文件选择、解析代码）放在这里，确保调用nifti对象的方法
    document.getElementById('fileInput').addEventListener('change', function(e) {
      // 示例：使用nifti.parse处理文件
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = function(event) {
        const arrayBuffer = event.target.result;
        const niftiData = nifti.parse(arrayBuffer);
        // 后续渲染逻辑
      };
      reader.readAsArrayBuffer(file);
    });
  </script>
  

  注意：这种方式同样需要通过本地HTTP服务器访问，不能用file://协议。

4. 确认脚本输出格式 #

如果nifti-reader.js是UMD格式（支持全局变量、AMD、CommonJS），不要给<script>标签加type="module"，直接用普通标签加载即可，此时nifti会自动成为全局变量。

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