Looking for sharing common JS functions (Client side) from one file to different component Js file. | Adobe Higher Education
Skip to main content
H
harry263
September 22, 2022
Répondu

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

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.

Ce sujet a été fermé aux réponses.
Meilleure réponse par 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 commentaire

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorRéponse
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
    harry263Auteur
    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
        Conditions d'utilisationAccessibility statement

        Loading footer...