如何让 Javascript 代码在 Phoenix 中运行？答案

【问题标题】：How to make Javascript code run in Phoenix?如何让 Javascript 代码在 Phoenix 中运行？
【发布时间】：2016-01-18 15:34:26
【问题描述】：

所以我很难让用 app.js 编写的 Javascript 真正起作用。这是我到目前为止所做的：

我做的第一件事就是将代码写入 app.js 文件并希望它能正常工作。

App.js

import "deps/phoenix_html/web/static/js/phoenix_html"

const selectSort = document.getElementById("sort");
console.log("Herp");
const sortEntities = () => {
  const sortvalue = selectSort.value;
  const entities = document.querySelectorAll(".entitiy");
  const sortedEntities = entities.sort((a, b) =>
     a.querySelector(`.${sortvalue}`).textContent > a.querySelector(`.${sortvalue}`).textContent);
     document.querySelector(".entitiy-list").innerHTML = sortedEntities;
};

selectSort.addEventListener("onChange", sortEntities);

现在我尝试通过控制台访问 selectSort 变量，但未定义。我发现 app.js 自从我运行 windows 以来从未加载过，可以通过在 autoRequire 中添加另一行来修复它。

brunch-config.js

<---SNIPPET-->
  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"],
      "js\\app.js": ["web/static/js/app"] <-- The line added
    }
  },
<---SNIPPET-->

现在 app.js 文件终于正确加载了，我在 phoenix_html 导入时遇到了错误。

错误

Uncaught Error: Cannot find module "deps/phoenix_html/web/static/js/phoenix_html" from "web/static/js/app"

即使我删除了导入，当我在控制台中键入变量并且代码永远不会执行时，它仍然无法正确加载，而执行 console.log 消息。我错过了什么？如果我尝试在控制台窗口中编写代码，它可以正常工作。

项目本身已经很老了，可能从 11 月开始，所以我可能没有运行最新的“凤凰模板”。不确定那里是否存在与此相关的已知问题，我试着环顾四周。我什至有“Programming Phoenix”，但没有太多关于让 Javascript 在那里运行的内容。

【问题讨论】：

您之前是否运行过mix deps.get 然后mix compile？您应该首先确保 phoenix_html 在./deps/ 中
将 Phoenix 从 1.0 更新到 1.1.2 似乎已经解决了这个问题。

标签： javascript phoenix-framework

【解决方案1】：

我的项目使用了 Phoenix 1.0，它在 Windows 上存在已知问题，并使 Javascript 能够正确执行。我升级到 1.1.2，现在一切正常。

【讨论】：