close

Filter

loading table of contents...

Frontend Developer Manual / Version 2307

Table Of Contents

5.19 Building Standalone JavaScript Files

Sometimes certain JavaScript files of a theme are meant to be included on a page without loading the whole theme. This section describes a possible solution that is supported in our theme build.

First of all you need a script that is meant to be embedded on another page. For simplicity the goal for now is to write something to the console. The script could be located at src/console-message.js and could look like this:

console.log("Standalone feature loaded!");

In order to include this script into your theme build you need to define a script entry in your theme.config.json and configure it in a special way:

{
  "name": "your-theme",
  ...
  "scripts": [
    {
      "type": "webpack",
      "src": "src/js/your-theme.js"
    },
    ...
    {
      "type": "webpack",
      "src": "src/js/console-message.js",
      "runtime": "console-message",
      "include": false,
      "smartImport": "console-message"
    }
  ]
  ...
}

In addition to the default script src/your-theme.js we have defined a new script entry for src/console-message.js. The script makes use of a couple of configuration options:

  • This script utilizes the runtime configuration which tells the build process to isolate the script from other script files so no common runtime file is shared among them. This also means that all the libraries used by the script will be running in a separate instance.

  • (optional) The include option is set to false to prevent the script from automatically being loaded when the theme is loaded.

  • (optional) By setting the smartImport config to "console-message" we tell the theme build to only automatically load bricks that also have the "console-message" smartImport option in their package.json (see Section 4.1, “Structure of the Workspace” and Section 6.2, “Theme Config”). In this case it means that no brick is automatically loaded.

The theme can now be build and uploaded to the studio. When inspecting the generated content for the theme there will be a CMJavaScript content item named console-message.js in the theme's js folder. As it contains a standalone script you can directly link the content to any page regardless of its currently selected theme.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.