如何在 html.eex 模板中使用 NPM 库中的函数

Question

使用带有 webpack 的 Phoenix 1.4，我将 "findandreplacedomtext": "^0.4.6" 添加到我的 package.json 文件并安装了库。

现在 app.js 我有 import findAndReplaceDOMText from 'findandreplacedomtext'; 并且允许我使用库，但它只在 app.js 文件中工作 .我希望能够在我的视图模板中使用该库，但每当我尝试在模板中使用它时，我都会在控制台中收到错误 Uncaught ReferenceError: findAndReplaceDOMText is not defined。

我的模板中的代码如下所示：

<div id="container">
  This is a test.
</div>
<script>
  findAndReplaceDOMText(document.getElementById('container'), {
    find: 'test',
    wrap: 'mark'
  });
</script>

这会在控制台中引发错误。但是，如果我将相同的 javascript 代码放在 app.js 库的导入语句下方，它就可以工作。如何在视图模板内部和 app.js 外部使用库？

Answer 1

错误出在你的 js 中，你通过 id 'container' 选择了一个元素，但它是一个 class，所以它应该是：

findAndReplaceDOMText(document.getElementsByClassName('container')

Answer 2

在 webpack.config.js 的顶部我放置了 const webpack = require('webpack'); 以便在插件列表中我可以放置 new webpack.ProvidePlugin({findAndReplaceDOMText: "findandreplacedomtext"})。这样我就可以从 app.js.

中删除库的导入语句

然后，在 app.js 中，我放入 window.findAndReplaceDOMText = findAndReplaceDOMText; 以便在 app.js 之外公开模块。

最后，在我的模板中，我必须将函数包装在内容加载事件中，以确保我没有在函数加载之前调用它。

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    findAndReplaceDOMText(document.getElementById('container'), {
      find: 'test',
      wrap: 'mark'
    });
  });
</script>

如何在 html.eex 模板中使用 NPM 库中的函数

How to use function from NPM library in html.eex template

javascript

elixir

webpack

phoenix-framework