Looking for sharing common JS functions (Client side) from one file to different component Js file. | Community
Skip to main content
H
harry263
September 22, 2022
Solved

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

  • September 22, 2022
  • 1 reply
  • 957 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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") ... }();

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
September 23, 2022

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") ... }();
Arun Patidar
    H
    harry263Author
    September 23, 2022

    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
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      September 24, 2022

      Hi,

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

      Arun Patidar
        Terms & ConditionsAccessibility statement

        Loading footer...