1. Developing Oracle JET Apps Using MVVM Architecture
  2. Optimizing Performance
  3. Understand the Path Mapping Script File and Configuration Options

Understand the Path Mapping Script File and Configuration Options

When you build the application, the tooling invokes the path_mapping.json configuration file and determines the URL path for the Oracle JET modules and libraries based on the settings you configured for the use element.

The path mapping use element, set to local by default, specifies location of these require libraries:

  • Core Oracle JET libraries (appear as ojs, ojL10n, ojtranslations)

  • Third-party dependency libraries (for example, knockout, jquery, hammerjs, and other)

When you build your application, by default, Oracle JET will load the libraries from the local application as specified in the require block of the application's main.js. Each library URL is assembled from the baseUrl element and the path attribute of the lib element as specified by the path mapping file.

For example, the path mapping definition for the knockout library shows the following details. 

"baseUrl": "js"
"use": "local"

"libs": {
   ...
     "path": "libs/knockout/knockout-3.x.x.debug"
}

And, after build or serve, the main.js require block contains the following URI:

/js/libs/knockout/knockout-3.x.x.debug

When configured for Oracle Content Delivery Network (CDN), the main.js require block is determined either entirely by the path mapping file local to the application or, in the case of the bundle loading optimization, partially from the path mapping file and partially from the require block of the bundles-config.js file maintained by Oracle on Oracle CDN. Path injector markers in main.js indicate where the release specific URLs appear.

CDN Scenario 1: To load libraries and modules as bundles from CDN, by default only the path mappings for third-party libraries will appear in the URL library list in the require block of main.js.

For example, the path mapping definition for the knockout library shows the following details. Note that the config attribute specifies the name of the bundles configuration script file as bundles-config.js. 

"baseUrl": "js" <==ignored
"use": "cdn"

"cdns": {
    "jet": {
       "prefix": "https://static.oracle.com/cdn/jet/12.1.0/default/js",
       "css": "https://static.oracle.com/cdn/jet/12.1.0/default/css",
       "config": "bundles-config.js"
     },
    "3rdparty": "https://static.oracle.com/cdn/jet/12.1.0/3rdparty"
},

"libs": {
   ...
     "cdnPath": "knockout/knockout-3.x.x"
}

And, after build or serve, the main.js require block contains a list of third-party library URLs as a placeholder, and, as the following code snippet shows, the index.html file references the script to load libraries and modules as bundles from CDN. 

<body>
  <script type="text/javascript" src="https://static.oracle.com/cdn/jet/12.1.0/default/js/bundles-config.js"></script>
..
</body>

Note that loading libraries and module as specified in the require block of the bundles-config.js file takes precedence over any duplicate libraries that may appear in the main.js require block. However, if you prefer, you can configure the third-party library path mapping so their URLs do not appear in the main.js require block. To accomplish this, set "cdn": "3rdparty" in the path_mapping.json file to show "cdn": "jet" for each third-party library path definition.

CDN Scenario 2: To load the libraries individually from CDN using the path mapping URLs to specify the location, the list of library URLs will appear entirely in the require block of main.js.

For example, the path mapping definition for the knockout library shows the following details after you edit the cdns element to remove the bundles configuration script reference. 

"baseUrl": "js" <==ignored
"use": "cdn"

"cdns": {
    "jet": "https://static.oracle.com/cdn/jet/12.1.0/default/js",
    "css": "https://static.oracle.com/cdn/jet/12.1.0/default/css",
    "3rdparty": "https://static.oracle.com/cdn/jet/12.1.0/3rdparty"
}

"libs": {
   ...
     "cdnPath": "knockout/knockout-3.x.x"
}

And, after build or serve, the main.js require block contains the following URL (along with the URLs for all other base libraries and modules):

"knockout":"https://static.oracle.com/cdn/jet/12.1.0/3rdparty/knockout/knockout-3.x.x"

CDN Scenario 3: If your application needs to access libraries that reside on a non-Oracle CDN, you can update the path-mapping.js file to specify your own CDN endpoint and library definition.

Depending on whether you use the bundles configuration script, add your CDN name and endpoint URI to the cdns definition as follows.

When using the bundles configuration script to load libraries and modules:

"cdns": {
    "jet": {
      "prefix": "https://static.oracle.com/cdn/jet/12.1.0/default/js",
      "css": "https://static.oracle.com/cdn/jet/12.1.0/default/css",
      "config": "bundles-config.js"
    },
    "3rdparty": "https://static.oracle.com/cdn/jet/12.1.0/3rdparty"
    "yourCDN": "endPoint to your own CDN"
},
...

Or, when loading libraries and modules individually (not using the bundles configuration script):

"cdns": {
    "jet": "https://static.oracle.com/cdn/jet/12.1.0/default/js",
    "css": "https://static.oracle.com/cdn/jet/12.1.0/default/css",
    "3rdparty": "https://static.oracle.com/cdn/jet/12.1.0/3rdparty",
    "yourCDN": "endPoint to your own CDN"
},
...

Then, in the list of libraries, define your library entry similar to the following sample.

"yourLib": {
  "cdn": "yourCDN",
  "cwd": "node_modules/yourLib",
  "debug": {
    "src": "yourLib.js",
    "path": "libs/yourLib/yourLib.js",
    "cdnPath": "yourLib/yourLib.js"
  },
  "release": {
    "src": "yourLib.min.js",
    "path": "libs/yourLib/yourLib.min.js",
    "cdnPath": "yourLib/yourLib.min.js"
  }
},