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?
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.
“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().
…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”…
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.
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:
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…
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) and I’d like it become my base framework for my future tasks, so I keep up to experiment…