Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

...

}();

View solution in original post

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.