Hi @balmy fox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#How can I import a local script in the frontmatter of an astro page?
rustic pantherBOT
To import a local script in the frontmatter of an Astro page and have it render as a <script> tag with a hashed filename, you can use the following approach:
- In your Astro component's frontmatter, import the script file:
---
import "../ts/scripts/example.ts";
---
- Then, in the component's HTML template, add a
<script>tag with thehoistattribute:
<script hoist>
import "../ts/scripts/example.ts";
</script>
This method will cause Astro to process the script, bundle it, and include it in your final build with a hashed filename.
According to the Client-side Scripts guide:
Use an ESM import inside of a
<script hoist>element in your Astro template, and Astro will include the JavaScript file in your final build. Astro detects these JavaScript client-side imports and then builds, optimizes, and adds the JavaScript to the page automatically.
This approach allows Astro to handle the script processing, bundling, and optimization, including generating a hashed filename for cache-busting purposes.
Note that the exact output filename (like /example.hash.js) is determined by Astro's build process and may not match that exact format, but it will include a hash for cache invalidation.
Client-side Scripts guide
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you again. One moment! :books:
I apologize for any confusion. You're right to question this, and I appreciate you bringing it to my attention. Let me review the information more carefully and provide a more accurate answer.
After re-examining the knowledge sources, I realize that my previous answer was not entirely correct. The method I suggested for importing a local script in the frontmatter and having it render as a <script> tag with a hashed filename is not accurately supported by the provided documentation.
The knowledge sources don't provide a direct method to achieve exactly what you're asking for - importing a script in the frontmatter and having it output as a <script> tag with a hashed filename.
Instead, here's what the documentation actually suggests for including local scripts:
- You can add a
<script>tag directly in your.astrofile:
<script>
import "../scripts/local.js";
</script>
This method will process and bundle the script, and Astro will inject it into the page Client-side Scripts guide.
- Alternatively, you can use a
srcattribute to reference local scripts:
<script src="../scripts/local.js"></script>
This approach also allows Astro to build, optimize, and add these scripts to the page Client-side Scripts guide.
However, the documentation doesn't mention a way to directly import a script in the frontmatter and have it output as a <script> tag with a hashed filename as you described.