Phoenix：通过 git 引用 exq_ui 依赖项时出错答案

【问题标题】：Phoenix: Error when refer to exq_ui dependency via gitPhoenix：通过 git 引用 exq_ui 依赖项时出错
【发布时间】：2020-04-24 09:11:56
【问题描述】：

我在我的 Phoenix 应用程序中使用 exq 和 exq_ui 进行后台作业处理和监控。

一开始，我在 mix.exs 的 deps 中引用 exq_ui 是这样的：

{:exq_ui, "~> 0.11.0", only: [:dev, :qa, :stg, :prod]}

而且效果很好。

但后来我在 UI 中发现了 2 个错误：

当我单击“忙碌”选项卡时，它会在服务器端爆炸，并且在 UI 中的“忙碌”选项卡中不显示任何内容。
在 Scheduled 选项卡中，当作业作为 map 列表传递 args 时，它在 Args 列中显示为 [Object object]，而不是 args 的实际内容。

我在此 PR 中将这些错误修复到主要官方 repo： https://github.com/akira/exq_ui/pull/89/files

但我不能指望它会很快被合并，所以我在 mix.exs 中更改我的依赖项，如下所示：

{:exq_ui, "~> 0.11.0",
  git: "https://github.com/chauhonglinh/exq_ui.git",
  branch: "feature/fix_busy_tab_in_exq_ui",
  only: [:dev, :qa, :stg, :prod]}

现在麻烦发生了。

mix deps.get、mix deps.compile 和 iex -S mix phx.server 都运行成功。

但是当我浏览到http://localhost:4040时，UI没有出现，并且在javascript控制台中，出现错误：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4040/assets/vendor.css".
exq_ui:20 
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4040/assets/exqui.css".
vendor.js:1 Uncaught SyntaxError: Unexpected token <
exqui.js:1 Uncaught SyntaxError: Unexpected token <

问题：为什么普通的deps config不会出现这个错误，但是deps config引用了git repo时会出现这个错误？

我该如何解决？

我认为 React 和 Angular 在某些情况下也有类似的错误，但似乎没有人能很好地解决它们，只是到处乱说。

【问题讨论】：

确保您已经修补了0.11.0 或您的mix info 显示的内容，而不是master — 否则可能是master 带来的问题。
我使用 exq_ui 0.11.0
再一次：确保你已经修补了0.11.0。 AFAICS，你的 PR 补丁 master。错误可能来自他们的master 和他们的0.11.0 之间的差异。
@AlekseiMatiushkin：哦，我明白你在说什么。那么我应该将我的 PR 指向 Akira repo 上的哪个分支？我没有看到 0.11.0 分支。
不知道，抱歉。这只是一个疯狂的猜测。

标签： reactjs ember.js elixir phoenix

【解决方案1】：

我发现了问题所在。但是如果 my PR 没有被合并，我还没有看到任何好的解决方案（没有复制整个 exq_ui 包并创建一个新包）

这就是问题所在。

像这样引用包指向 hex.pm 上的二进制分发，因此它具有正确预打包和 babelified 的所有 emberjs 和 js 模块：

{:exq_ui, "~> 0.11.0", only: [:dev, :qa, :stg, :prod]}

但是，github中的引用包指向github的source，所以它只有source：

{:exq_ui, "~> 0.11.0",
  git: "https://github.com/chauhonglinh/exq_ui.git",
  branch: "feature/fix_busy_tab_in_exq_ui",
  only: [:dev, :qa, :stg, :prod]}

开发环境解决方案： 为了让它在开发环境中工作，在我的 Phoenix 存储库中，我需要运行以下命令：

cd deps/exq_ui/priv/ember
npm install
bower install
node_modules/ember-cli/bin/ember build --environment=production

然后http://localhost:4040 的网络用户界面将正常工作。

剩下的问题：当我从 git repo 中引用 exq_ui 时，我仍然不明白如何在我想发布我的 Phoenix 应用程序时为 exq_ui 制作二进制分布式版本。 p>

【讨论】：