Question

使用Phoenix 1.4和webpack，我在自己的package.json文件中添加了"findandreplacedomtext": "^0.4.6"并安装了库。

现在在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>

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

Answer 1

错误出在您的js中，您正在通过id'container'选择一个元素，但这是一个类，因此应该是：

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库中的函数

2 个答案: