TargetableESModuleObject

Builds a simple ES module that imports a list of other modules you provide, and then re-exports those modules as an object with properties matching the imported bindings. Useful for building named lists and associative arrays when making extension points.

Uses export-esm-collection-loader to build source code.

• TargetableESModuleObject
  • .addImport(importString) ⇒ this
  • .add(...args) ⇒ this

Adds a module to the object using the addImport() method from TargetableESModule. Since, all imports must be exported, this method performs additional validation.

Chainable
Returns: Parameters

Adds a module or modules to the object using the addImport() function.

Chainable
Returns: Parameters

Source Code: pwa-studio/packages/pwa-buildpack/lib/WebpackTools/targetables/TargetableESModuleObject.js

Examples#

Code examples for the TargetableESModuleObject class.

Export three button styles in a mapping#

Pass in import statements to the add() function to import that module into the target file and add it to the exported object.

// Create a TargetableESModuleObject linked to the `button.js` file
const buttons = targetable.esModuleArray("path/to/buttons.js");

// Add import statements
buttons.add("import Primary from './path/to/Primary'");
buttons.add("import { Button as Simple } from './path/to/simple'");
buttons.add("import Secondary from './path/to/Standard'");
CopyCopied to your clipboard
1// Create a TargetableESModuleObject linked to the `button.js` file
2const buttons = targetable.esModuleArray("path/to/buttons.js");
3
4// Add import statements
5buttons.add("import Primary from './path/to/Primary'");
6buttons.add("import { Button as Simple } from './path/to/simple'");
7buttons.add("import Secondary from './path/to/Standard'");

The file linked to the TargetableESModuleObject class must be a module that export an empty object. Without the module, the loader has nothing to "load" and will not execute. Code editors and linters may also complain if the module is missing.

After the transforms above, ./path/to/button.js enters the bundle as:

import Primary from './path/to/Primary');
import { Button as Simple } from './path/to/simple');
import { Secondary } from './path/to/Standard');

export default { Primary, Simple, Secondary };
CopyCopied to your clipboard
1import Primary from './path/to/Primary');
2import { Button as Simple } from './path/to/simple');
3import { Secondary } from './path/to/Standard');
4
5export default { Primary, Simple, Secondary };

Last updated 6/1/2021

Was this helpful?

Yes

No