Expand my Community achievements bar.

Elevate your expertise and be recognized as a true influencer! Nominations for the exclusive Adobe Community Advisor program 2023 are now OPEN.
SOLVED

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

Avatar

Level 1

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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")

...

}();
3 Replies

Avatar

Correct answer by
Community Advisor

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")

...

}();

Avatar

Level 1

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 ?

Avatar

Community Advisor

Hi,

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