How to reference assets with cache busting suffix in JS?

Hey,

I have a question with Sage 9 regarding the cache busting feature in production mode: how do you reference an asset from a JS module?

I have this (simplified) module for instance:

import $ from 'jquery'
import Mustache from 'mustache'
import Twitter from 'twitter-text'
import 'slick-carousel'

const $slider = $('#tweetsSlider')
const template = $('#tweet-template').html()

function init() {
    $.get('<URL>', appendSlides)
}

function appendSlides(data) {
  $.each(data.posts, function(i, post) {
    const html = Mustache.render(template, {
      url: post.url,
      image: post.image ? post.image : window.themeconfig.asset_path + 'images/twitter-no-image.png',
      user_url: post.user_url,
      text:  Twitter.autoLink(post.text),
    })
    $slider.append(html)
  })

  $slider.slick()
}

export default { init }

In this case i’m referencing the twitter-no-image.png asset (a fallback image) directly in JS but then it won’t be replaced with the suffixed production asset when compiling.

Any idea how to get this right?

thanks for helping!

To my knowledge there isn’t an existing JS utility for that, but you could come at this in a couple ways.

  • You could pass the results of asset_path() to wp_localize_script() to give your JS access to that the specific file you’re looking to load. This is likely the easiest if you only have one or two images you need access to, but it doesn’t scale super well.
  • You could write a little bit of JS to check for dist/assets.json, parse it if it exists, and then look up hashed file names from the original file names that way.
1 Like

Another good question is why you need to reference it? With webpack you should be able to import everything you need into the bundle and reference it from there.

3 Likes

@MWDelaney thank you so much!!

import image from 'images/twitter-no-image.png' and that’s it.

Didn’t know i could do that with ES6 modules.

Also i don’t need to reference asset_path anymore so i am even happier.

Thanks!!

2 Likes