Use RequireJS to Reference Third-Party JavaScript Libraries

If you want to use third-party JavaScript libraries in your App UI, you can import the library and add a requirejs statement to your App UI’s definition.

JS libraries can be imported at the App UI level or at the extension level. For typical usage within an App UI, import your JS library to the resources directory at the App UI level (extension1/sources/ui/self/applications/<app-ui-id>/resources). If you want to use external JS libraries with custom web components and fragments, import your JS library to the resources directory at the extension level (extension1/sources/ui/self/resources/).

Open the app.json file for your App UI.
- In the App UIs pane, select your App UI node, then click the JSON tab, or
- In the Source view, locate the file for your App UI under extension1/sources/ui/self/applications/.
Add a requirejs statement to the App UI’s definition. For example, if you’ve added gl-matrix-min.js to your App UI’s resources under …/applications/*`<app-ui-id>`*/resources/js/, add:
```
"requirejs": {
  "paths": {
    "gl-matrix": "resources/js/gl-matrix-min"
  }
}
```
You can also use an expression as the value. For example, instead of resources/js/gl-matrix-min, enter:
```
"requirejs": {
  "paths": {
    "gl-matrix": ""
  }
}
```
Either way, make sure the requirejs entry is a sibling of the id or description entries. If a requirejs section already exists, simply add your entry under paths.

If you added a JS library (say, HumanResourcesUtils) to your extension’s resources under extension1/sources/ui/self/resources/js/HumanResourcesUtils, your requirejs statement might be similar to:
```
"requirejs": {
  "paths": {
    "HumanResourcesUtils": "/ui/self/resources/js/HumanResourcesUtils"
  }
}
```
Where HumanResourcesUtils is a folder containing JS files such as promotion.js, manager.js, and employee.js.
To load and use your library in a module, use the define statement to make your library a dependency for your module. In your JS file, enter, for example:
```
define(['gl-matrix', 'HumanResourcesUtils/promotion'], (glmatrix, Promotion) => {
          'use strict';
  ...
```