How to import external .js files into commands.js? [Office.js Excell]

Question

what is the proper way of importing a function that is in a different .js script into the commands.js script for an Office Excell Ribbon add-in?

Here is my commands.html file:

<!--
    "commands.html"
    HTML file importing the necessary scripts, especially commands.js where
    button presses are mapped.
-->

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script src="commands.js" type="module"></script> 

Here is my commands.js file

/*
  "commands.js"
  All top-level functions that are mapped to button presses on the ribbon
  are and should be in this file. Function names are the same as the IDs of 
  the buttons they are mapped to (with underscored instead of dashes).
*/

import * as tools from "./scripts/native/tools.js"

Office.initialize = function() { 
  /*
    Initialize Office function. Has to be called here.
  */
} 

console.log(tools.char_to_underscore("test32"))

Here is the function I would like to import in tools.js:

/*
    "tools.js"
    A collection of functions that help with certain problems.
*/

export function char_to_underscore(string) {
    /*
        Replaces a set of characters in a string with underscores.
    */
    var replacement_list = [/ /g, ".", "\\", "%", "/", "\n", "-", "(", ")", "|"];
    for (var replace in replacement_list) {
        string = string.replace(replacement_list[replace], "_");
    }
    return string;
}

Here is my project directory:

screenshot

VSCode seems to find these files perfectly fine, but when I launch the add-in I get the following error:

Failed to load resource: the server responded with a status of 404 (Not Found)
logger — index.js:551 (https://localhost:3000/scripts/native/tools.js)

I have tried almost everything I can think of and nothing seems to resolve this issue. Am I missing something here? It is unsustainable for large ribbon projects to have all the source code in one file.

Answer 1

Answering my own question here. The only method I found that works for the purpose I desire is the following:

• Instead of mapping ribbon buttons in the commands.js file, rather do it in commands.html with code being written in a <script> tag as follows:

<script>
    async function button_x_pressed(event) { 
    console.log(char_to_underscore("f%%%"));
    console.log(return_sample_values());
    await Excel.run(async (context) => {
        let range = context.workbook.getSelectedRange();
        range.format.fill.color = "Blue";
        await context.sync();
    });
    event.completed(); // must be called (signals to Excell that the process/event is completed)
    }
</script>

• In commands.html, import external .js files as follows:

<script type="text/javascript" src="./scripts/native/tools.js"></script>

• The button_x_pressed function can then find the char_to_underscore function although the autocomplete in VScode does not.

• The only code in commands.js is the following:

Office.initialize = function() { 
  /*
    Initialize Office function. Has to be called here.
  */
} 

This can most likely also be moved to the in-file <script> in commands.html but I decided to keep it here to have something in this autogenerated file.

• My method comes down to mapping buttons to functions in commands.hmtl and calling external scripts in those functions that perform the desired action of the ribbon button.