Wiki source code of Define the Importmap for a Module
Last modified by Manuel Leduc on 2026/02/05 17:22
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | When a module bundles JavaScript with imports that are not bundled (i.e., it depends on an external resource), the module import ID needs to be mapped to the URL of the module JavaScript entry point. | ||
| 2 | |||
| 3 | To do so, an ##xwiki.extension.javascript.modules.importmap## maven property needs to be declared in the module. | ||
| 4 | |||
| 5 | The example below shows how to map the import of Vue to the entry point of the Vue webjars. | ||
| 6 | |||
| 7 | == Step 1 == | ||
| 8 | |||
| 9 | Add the dependency you wish to map to the runtime dependencies of the module. | ||
| 10 | |||
| 11 | {{code language="xml"}} | ||
| 12 | <?xml version="1.0" encoding="UTF-8"?> | ||
| 13 | <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> | ||
| 14 | <dependencies> | ||
| 15 | <!-- ... --> | ||
| 16 | <dependency> | ||
| 17 | <groupId>org.webjars.npm</groupId> | ||
| 18 | <artifactId>vue</artifactId> | ||
| 19 | <scope>runtime</scope> | ||
| 20 | </dependency> | ||
| 21 | <!-- ... --> | ||
| 22 | </dependencies> | ||
| 23 | </project> | ||
| 24 | {{/code}} | ||
| 25 | |||
| 26 | == Step 2 == | ||
| 27 | |||
| 28 | Declare the ##xwiki.extension.javascript.modules.importmap## property. | ||
| 29 | |||
| 30 | {{code language="xml"}} | ||
| 31 | <?xml version="1.0" encoding="UTF-8"?> | ||
| 32 | <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> | ||
| 33 | <properties> | ||
| 34 | <xwiki.extension.javascript.modules.importmap> | ||
| 35 | { | ||
| 36 | "vue": "org.webjars.npm:vue/dist/vue.runtime.esm-browser.prod.js" | ||
| 37 | } | ||
| 38 | </xwiki.extension.javascript.modules.importmap> | ||
| 39 | </properties> | ||
| 40 | </project> | ||
| 41 | {{/code}} | ||
| 42 | |||
| 43 | == Final result == | ||
| 44 | |||
| 45 | {{code language="xml"}} | ||
| 46 | <?xml version="1.0" encoding="UTF-8"?> | ||
| 47 | <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> | ||
| 48 | <modelVersion>4.0.0</modelVersion> | ||
| 49 | <parent> | ||
| 50 | <groupId>org.xwiki.platform</groupId> | ||
| 51 | <artifactId>xwiki-platform-livedata</artifactId> | ||
| 52 | <version>18.1.0-SNAPSHOT</version> | ||
| 53 | </parent> | ||
| 54 | <packaging>webjar-node</packaging> | ||
| 55 | <artifactId>xwiki-platform-livedata-webjar</artifactId> | ||
| 56 | <properties> | ||
| 57 | <xwiki.extension.javascript.modules.importmap> | ||
| 58 | { | ||
| 59 | "vue": "org.webjars.npm:vue/dist/vue.runtime.esm-browser.prod.js" | ||
| 60 | } | ||
| 61 | </xwiki.extension.javascript.modules.importmap> | ||
| 62 | </properties> | ||
| 63 | <dependencies> | ||
| 64 | <dependency> | ||
| 65 | <groupId>org.webjars.npm</groupId> | ||
| 66 | <artifactId>vue</artifactId> | ||
| 67 | <scope>runtime</scope> | ||
| 68 | </dependency> | ||
| 69 | </dependencies> | ||
| 70 | </project> | ||
| 71 | {{/code}} |
