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

Question

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

现在在app.js中，我有import findAndReplaceDOMText from 'findandreplacedomtext';，这允许我使用库，，但它只在app.jss文件中工作。我希望能够在视图模板中使用该库，但每当我尝试在模板中使用它时，控制台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代码放在库的import语句下面的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.中删除库的import语句

然后，我在app.js中放入window.findAndReplaceDOMText = findAndReplaceDOMText;，以便将模块暴露在app.js.之外

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

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