Sfra-module-loader NPM

sfra-module-loader

A saleforce commerce cloud module loader for webpack based on the cartridge path

Getting Started

To begin, you'll need to install sfra-module-loader:

$ npm install sfra-module-loader --save-dev

Import (or require) the target file(s) in one of the bundle's files in current cartridge:

// bundle file
import mod from '*/component/mod'

Then add the loader to your webpack config. For example:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js)$/,
        use: [
          {
            loader: 'sfra-module-loader',
            options: {
              cartridges: [
                'storefront',
                'core'
              ]
            }
          }
        ]
      }
    ]
  }
}

And run webpack via your preferred method. This will load the first found module in cartridge path.

Options

`context`

Type: String Default: ../

Specifies a cartridges context.

// webpack.config.js
...
{
  loader: 'sfra-module-loader',
  options: {
    cartridges: 'storefront:core',
    context: path.resolve(__dirname, '../')
  }
}
...

`cartridges`

Type: String|Array Default:

The cartridge path

// bundle file
import mod from '*/component/mod'

// webpack.config.js
...
{
  loader: 'sfra-module-loader',
  options: {
    cartridges: [
      'storefront',
      'core'
    ]
  }
}
...

Or using a String:

// bundle file
import mod from '*/component/mod'

// webpack.config.js
...
{
  loader: 'sfra-module-loader',
  options: {
    cartridges: 'storefront:core'
  }
}
...

Loader will scan all cartriges in project repositoty from top most (or left to right) cartridge in cartridge path

`cache`

Type: Boolean Default: true

If true, loader will scan and store cartridge location on first run and use them for next run

// webpack.config.js
{
  loader: 'sfra-module-loader',
  options: {
    ...
    cache: true
  }
}

`alias`

Type: Object

If configured, loader will replace all request that star with the alias name with closest existing ancestor module

// webpack.config.js
{
  loader: 'sfra-module-loader',
  options: {
    ...
    alias: {
      core: 'core',
    },
    cartridges: 'storefront:core'
  }
}

To driect request to an ancestor module, use colon : after alias name (e.g, core:abc/mod)

Examples

The following examples show how one might use sfra-module-loader and what the result would be.

// /core/js/components/mod.js 
export default () => {
  console.log('module from core');
}

// /pluggin/js/components/mod.js 
const baseModule = module.superModule; // -> /core/js/components/mod.js

export default () => {
  baseModule();

  console.log('module from pluggin');
}

// /storefront/main.js
import mod1 from '*/components/mod' // -> /pluggin/js/components/mod.js
import mod2 from 'core/components/mod' // -> /pluggin/js/components/mod.js
import mod3 from 'core:components/mod' // -> /core/js/components/mod.js

export default () => {
  mod();
  mod1();
  mod3();
}

// webpack.config.js
{
  loader: 'sfra-module-loader',
  options: {
    alias: {
      core: 'core',
    },
    cartridges: 'storefront:core',
    context: path.resolve(__dirname, '../')
  }
}