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

Question

Using Phoenix 1.4 with webpack, I added "findandreplacedomtext": "^0.4.6" to my package.json file and installed the library.

Now in app.js I have import findAndReplaceDOMText from 'findandreplacedomtext'; and that allows me to use the library, but it only works within the app.js file . I want to be able to use the library in my view templates but whenever I try to use it in a template, I get an error in the console Uncaught ReferenceError: findAndReplaceDOMText is not defined .

This is what the code looks like inside of my template:

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

That throws an error in the console. But if I put the same javascript code in app.js below the library's import statement it works. How can I use the library inside of my view template and outside of app.js?

Answer 1

错误出在您的js中，您正在通过ID“容器”选择一个元素，但这是一个类，因此应为：

findAndReplaceDOMText(document.getElementsByClassName('container')

Answer 2

At the top of webpack.config.js I put const webpack = require('webpack'); so that in the plugins list I could put new webpack.ProvidePlugin({findAndReplaceDOMText: "findandreplacedomtext"}) . This made it so that I could remove the import statement for the library from app.js.

Then, in app.js I put window.findAndReplaceDOMText = findAndReplaceDOMText; in order to expose the module outside of app.js.

Finally, in my template, I had to wrap the function in a content loaded event in order to make sure I wasn't invoking the function before it was loaded.

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