Document how to use assets installed in `node_modules`

[offbyone]

I've got jQuery installed by npm in node_modules and I would like to pull that in using pelican-webassets. I imagine I'm not the first person to try this, but I can't suss out how from the documentation.

[bryanbrattlof]

HI @offbyone

I have no clue what I'm doing when it comes to anything with JavaScript (so someone please jump in if I'm wrong) but from what little I do understand, node_modules is essentially a cache directory for the npm package manager.

Assuming we're not using any type of JS compiler, we could add node_modules to the WEBASSETS_SOURCE_PATHS inside our pelican configuration

WEBASSETS_SOURCE_PATHS = ["node_modules"]

to get pelican-webassets to search for files inside the node_modules folder inside our THEME_STATIC_PATHS directory.

You should see a line like this near the beginning of the logs when building our website in DEBUG mode.

$ pelican -D | grep webassets
...
DEBUG: webassets: using assets in '/home/me/website/theme/node_modules'
...

Now that pelican-webassets is looking for files inside our node_modules folder, we can link to the jquery.js file inside our pelican templates.

{% assets output="js/jquery.js", "jquery/dist/jquery.js" %}
 <script src="{{SITEURL}}/{{ASSET_URL}}"></script>
{% endassets %}

I'm assuming the compiled jquery.js file will be inside node_modules/jquery/dist/. From what I can tell there are a few different version of jQuery. jquery.min.js, jquery.slim.js, jquery.slim.min.js. My system downloaded all of these inside the dist folder. YMMV

---

We can also define a bundle inside our pelican configuration file.

WEBASSETS_SOURCE_PATHS = ["node_modules"]
WEBASSETS_BUNDLES = (("jquery", ("jquery/dist/jquery.slim.min.js", ),  {"output": "js/jquery.js"}))

Simplifying our {% assets %} block inside our templates

{% assets "jquery" %}
 <script src="{{SITEURL}}/{{ASSET_URL}}"></script>
{% endassets %}

---

Again I don't know much about the JavaScript ecosystem, so let me know how this worked out for you.