Return all JS functions via requirejs

Question

In my exemple, i have just one function and I call it in phtml on passing the name function as param require(['jquery', 'module'], function(,ドル hello) and it works fine.

1. Now if i want to return 10 functions for exemple, what is the best way to do that.

2. Did deps attribute deps: ["js/go"]is correct for that instead of map

3. I wonder if there is not a way to implemente some js libraire, ie we have to put the lib js content in a file js then we declare it in a some module then the lib content will automatically be rendered without calling all functions one by one.

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
 map: {
 '*': {
 module: 'Vendor_module/js/go',
 }
 }
};

app/code/Vendor/Module/view/frontend/web/js/go.js

define(['jquery'], function($){
 "use strict";
 return function hello()
 {
 alert('hello from function');
 }
 public function f1()
 {
 ...
 }
 public function f2()
 {
 ...
 }
 ...
});

app/code/Vendor/Module/view/frontend/templates/file.phtml

<script type="text/javascript">
 require(['jquery', 'module'], function(,ドル hello) {
 hello();
 });
</script>

• B00MER: inchoo.net/magento-2/… if you're just wanting to add a custom .js of local function declerations.

Answer 1

Rather than return the function you can return an object that contains the functions, you can them call them individually whenever you need.

In this example I have 3 files:

• app/design/frontend/Vendor/theme/Magento_Theme/templates/test.phtml
• app/design/frontend/Vendor/theme/Magento_Theme/web/js/module-a.js
• app/design/frontend/Vendor/theme/Magento_Theme/web/js/module-b.js

Template

<script type="text/x-magento-init">
 {
 "*": {
 "Magento_Theme/js/module-b":{}
 }
 }
</script>

Module A

define(['jquery', 'domReady!'], function(,ドル doc) {
 'use strict';
 var moduleA = {
 functionA: function() {
 console.log('This is from module A, functionA');
 },
 functionB: function() {
 console.log('This is from module A, function B');
 }
 };
 return moduleA;
});

Module B

require(['jquery', 'domReady!', 'Magento_Theme/js/module-a'], function(,ドル doc, moduleA) {
 'use strict';
 moduleA.functionA();
 moduleA.functionB();
});

Screenshot enter image description here

Alternative method

You can also do it by writing the functions outside an object, then returning only the functions you need. The positive of this method is you only return what you want to be re-usable.

Replace module A from above with this:

define(['jquery', 'domReady!'], function(,ドル doc) {
 'use strict';
 function functionA() {
 console.log('This is from module A, functionA. Returning an object of functions.');
 }
 function functionB() {
 console.log('This is from module A, functionB. Returning an object of functions.');
 }
 return {
 functionA: functionA,
 functionB: functionB
 }
});

Screenshot enter image description here

• PЯINCƎ: we are obliged to here to declare two js files module-a.js, module-b.js ? why not just one js
• Ben Crook: I only added the second file to show you how to call it form another file, if you would rather add your JS inside your PHTML (I don't recommend this) then just replace your JS inside your PHTML file with module B. It works the same way in a template as it does in a second JS file.
• Ben Crook: So rather than hello(); you would write module.hello();
• PЯINCƎ: Ok, i prefered the alternative method, but i have two question: 1. why return {functionA, functionB} doesn't work but {functionA:functionA ...} work 2. should i put moduleA as param in phtml function(,ドル doc){doc.functionA();} doesn't work, function(,ドル doc, moduleA){moduleA.functionA();} work I remember you that i used the alternative method
• PЯINCƎ: Ben, I found the solution of liveReloadand how to configure it with Grunt, if ever you need it, I've posted the complete solution magento.stackexchange.com/questions/219265/…