Introduction: modules and sharing code

• To share code between components, use ES6 module and export the variables or functions that you want to share.

• Your module structure looks like this:

  mynamespace

  └──myLibrary

  └──myLibrary.js

How to export a function or variable

// myFunction.js
export default myFunction () { 
	// Your code here
 }

How to Import a function or variable

• The component that imports the function chooses a name to refer to the default export.
• It doesn't have to be the name of the function or JavaScript file, that’s just a convention.

// consumerComponent.js
import myFunction from 'recipe/myFunction';

Export named functions or variables

// mortage.js
const getTermOptions = () => {
    return [
        { label: '20 years', value: 20 },
        { label: '25 years', value: 25 },
    ];
};

const calculateMonthlyPayment = (principal, years, rate) => {
    // Logic
};

export { getTermOptions, calculateMonthlyPayment };

• The component that imports the function uses the exported names. The mortage.js module is in the recipe namespace.

import { getTermOptions, calculateMonthlyPayment } from 'recipe/mortgage';

• You can export all resources from another module with a relative file path:

export * from './utils';

Calling external APIs using Javascript

By default, you can’t make WebSocket connections or calls to third-party APIs from JavaScript code. To do so, add a remote site as a CSP Trusted Site.

• You can’t load JavaScript resources from a third-party site, even a CSP Trusted Site. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component.
• After the library is loaded from the static resource, you can use it as normal.