在加载 browersify 隐蔽的 npm 包并在脚本标签中使用它时出错？

Question

我正在使用一个名为 lottie-web 的 npm 模块，如果你给它一个我从 adobe after effects 获得的 json 数据文件，它基本上会为你提供一个 svg 动画（为了保持简短确实是通过其 id 获取 html 元素，并在路径中获取 json 数据文件并在给定元素中加载 svg。我正在使用带有 express 的节点应用程序并使用车把（hbs ) 将前端渲染到浏览器，所以在这种情况下我们需要附加一个 lottie-web cdn 的脚本标签 link 或者我们可以使用 browserify 来转换下面给定的文件运行 browserify myfilename -o bundle.js命令然后在script标签中使用bundle.js在客户端加载js

const bodymovin = require('bodymovin')

var animation = bodymovin.loadAnimation({
  container: document.getElementById('loader'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '../../public/js/loader.json'
})

如果我采用第一种方法（即使用 cdn link），我会收到以下错误 lottie.js:4406 Uncaught DOMException: Failed to read the 'responseText' 属性来自 'XMLHttpRequest'：只有当对象的 'responseType' 为 '' 或 'text'（原为 'json'）时，该值才可访问。在 formatResponse (https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.js:4406:17) 在 XMLHttpRequest.xhr.onreadystatechange (https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.js:4424:26)

如果我采用第二种方法（即使用 browserify 捆绑的 js 文件），我会收到以下错误 VM2609:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 在 JSON.parse () 在 XMLHttpRequest.xhr.onreadystatechange (bundle.js:8583)

但是如果我尝试在普通 html 文件中使用 cdn link 并将 js 文件添加到运行上面给出的代码（即在我的文件夹结构之外正常 html css js 结构它工作正常）。谁能指出我哪里出错了，在此先感谢。

Answer 1

当基础资产 (../../public/js/loader.json) 使用 XMLHttpRequest 加载时，这些错误让我认为您的网络服务器回答不正确。

尝试打开浏览器控制台并检查 Network 选项卡，看看该请求发生了什么。 Response 应该是正确的 JSON。还要检查该请求的 Headers，您可能也会注意到那里的一些东西。

在查看您的 git 存储库后，我注意到您有一条快速路线：app.get('*' ,(req,res) => {，通过 404.hbs 生成的 HTM 文本回答.

我认为当你想要加载时 JSON 这条规则被执行，然后为调用者呈现 HTML，这会引发你看到的错误。

另一件奇怪的事情是我在你的 git 仓库中没有看到那些行 bodymovin.loadAnimation...

更新 1：

This line 应该是 path: './js/loader.json'，因为您正在为 public 目录提供资产根目录，并且您的 json 文件位于 public/js/loader.json 下.

此外，在解决了另一个弹出的问题后，可能是您的 JSON 配置错误，但我不会为您也解决这个问题。保重。

在加载 browersify 隐蔽的 npm 包并在脚本标签中使用它时出错？

Getting errors while loading a browersify coverted npm package and using it in a script tag?

cdn

node.js

express

browserify

更新 1：