Looking for sharing common JS functions (Client side) from one file to different component Js file.

[harry263]

Hello there,

We are hacing some common code which is repeating in several components. Also we have some common sharable JS functions which I want to share with a few components.

I am looking for some help around clientlib site. I have these 3 files.

ComponentA

   fileA.js

ComponentB

   fileB.js

ComponentC

   fileC.js

commonfunctions.js (All sharable functions are there)

How do I configure the import/export using babel/webpack in order to refer common function from "commonfunctions.js" file "fileA.js" and "fileB.js"

Any documentation or help will be appriciated.

[arunpatidar · Accepted solution]

Hi,

If you are using jquery then you can extend jQuery with your own functions. This functional are registered as plugin and available globally. 

$.fn.something = function{}

https://researchhubs.com/post/computing/javascript/what-does-fn-mean-in-jquery.html 

If you want to do using webpack, it is straight forward I guess

import { common } from '../../utils/common/compautil';

(function ($) {
'use strict';

...

common("I am from another file")

...

}();

[harry263]

Thanks for input. I have follow up questions. If I am using webpack then what is pom.xml file configuration and other configurations we have to place ? I mean what should the ideal folder and file structure shuold be ?

[arunpatidar]

Hi,

You can generate AEM project from latest archetype to check what are the recommendations.