Enqueuing/compile 3rd party JS libraries (no NPM packages)

sage
, ,
1

Hello,
I’ve tried many solutions to perform this task - following the Sage 9 book documentation, reading many thread in Roots Discourse, or other from the web - and yet I’m not able to enqueue (compile) 3rd party JS libraries.

Scenario: I’ve to create a wordpress theme from an HTML template (purchased from ThemeForest by the client). Libraries are premium and as far as I can tell these are not available as npm package (such as the Revolution slider).

Here’s (one of) my attempts:

  • created a “theme” directory in assets/scripts, and copied all the HTML template js directories/files in it;

  • in the assets/scripts/main.js I’ve imported all the js files, as follow:
    import ‘./theme/theme-name/plugins/revolution/js/jquery.themepunch.tools.min.js’;
    (…)

  • Run “yarn build”; bunch of errors due to eslint compile

  • so I’ve created an “.eslintignore” file with the following directive:
    resources/assets/script/theme/**/*.js

  • deleted dist folder; run “yarn build”…

  • …same problems

  • I’ve also tried to remove/comment-out the ‘use strict’; and Eslint module in webpack, but nope…

Any suggestion to import “any” js file in my theme?

1 Like
2

Hey there, @Saxpaolo –

It’s been a while since I’ve been in a position where I had to do this… but try again with this pattern & let me know how it goes: resources/assets/script/theme/**.

Also, I’m assuming you either made a typo or intentionally renamed your resources/assets/scripts directory to resources/assets/script but that could be the culprit, as well.

you’re 95% there!

3

“enqueue” and “compile” are two different concepts. It’s not clear which one you need from what you’ve posted.

If you just need the JavaScript files from the theme you purchased served on the site, and you don’t need to concatenate them or minify them, you just need to enqueue them, which is pretty straightforward. You can see how Sage does it in app/setup.php, or read through the WordPress documentation on wp_enqueue_script().

4

Hello Kellymears
…yep, it was a typo - anyway I keep trying :wink:

5

Hello Ben
you right - but actually I wrote “enqueue / compile” together for a reason.

That’s because I enqueue the js files using the asset_path() function, like this:

"wp_enqueue_script('template-name_plugins_revolution_themepunch_tools', asset_path('scripts/theme/template-name/plugins/revolution/js/jquery.themepunch.tools.min.js'), array(), null, true);

…this allow to include the relative file before the end of the body - and this is what I get:

<script type="text/javascript" src="//localhost:3000/app/themes/theme-name/dist/scripts/theme/template-name/plugins/revolution/js/jquery.themepunch.tools.min.js"></script>

…the problem is that I’ve got a “404 - not found” error, because in the “dist” folder there is no “scripts/theme/template-name/plugins/revolution/js/jquery.themepunch.tools.min.js”…

For sure I miss the right procedure to do this…

6

You should be able to modify your webpack config to just ignore the JS files in question when running eslint by changing these lines to the following:

{
    enforce: 'pre',
    test: /\.js$/,
    exclude: [/resources\/assets\/script\/theme/],
    include: config.paths.assets,
    use: 'eslint',
},

That essentially says "When you run eslint, include any *.js files you find in my assets folder but ignore anything at a path that matches the regex /resources\/assets\/script\/theme/.

This is just off the dome though, and I’m not sure if it’s runnable code. you can look up the specifications for how exclude works here.

7

Hello Ben, thanks for the hint
…unfortunately I was not able to get it work.

By now, the solution that seems to work for me is using the “classic get_template_directory_uri()”:

wp_enqueue_script('theme-name_plugins_revolution_themepunch_tools', get_template_directory_uri() . '/assets/scripts/theme/theme-name/plugins/revolution/js/jquery.themepunch.tools.min.js', array(), null, true);

…and probably I’ll stick with this method.

Anyway, right now I’m trying to test the use of config json file.
I’ve created an “init.js” file in the “scripts/theme” directory, with main js imports:

import './theme-name/plugins.js';
import './theme-name/functions.js';
import './theme-name/custom.js';

Btw, I’ve already tried this solution before but without the “.eslintignore” file (and, without it, the build process always gave me errors); now it don’t (so at least the eslintignore should work), but I have to test if the js actually works… (but I already know that this procedure imply the compile process and in my case I don’t think it’s good…)

UPDATE: I think I need to rest, as also the above get_template_directory_uri() method still don’t work. I mean, the browser respond with a bunch of “404”, probably because the right method should be the use of “asset_path()” function.
What I don’t get is that also the “dist/styles/main.css” appears as “404 not found”, but when I edit the scss file, the browser detect and show all the changes…

What am I missing? :neutral_face:

8

When you run yarn start, the styles are injected directly into the page, and main.css isn’t rendered to disk for every change. It’s explained in the documentation here: https://roots.io/sage/docs/theme-development-and-building/#asset-generation-with-yarn-build-vs-yarn-start

As for the rest of your question, I’m not sure I understand what you’re asking about or trying to do.

9

Hi Ben (…and so sorry to bother…)
…well, evidently I completely missed this aspect about build-vs-start, this is more clear now.
I really like bedrock/sage app and I’m discovering it step-by-step (and mistakes-by-mistakes) :smile: and I’d like it become my base framework for my future tasks, so I keep up to experiment…

10

This topic was automatically closed after 42 days. New replies are no longer allowed.