ES6 AMD Modules and Grunt

ES6 AMD Modules and Grunt

by Austin Powell -
Number of replies: 3

I am needing to update some Javascript in a custom plugin we developed for our installation a few years ago and I remember struggling last time with figuring out how exactly to make an AMD module. Evidentially I figured it out back then as it works and has worked since that version was released, but like so many one-time requirements I have lost this knowledge. Now in reviewing several pages across the Moodle docs including Javascript Modules and Grunt, I see several changes have come about in regards to ES6 and that beginning in 3.10 (which we will move to soon) these scripts will have to be in ES6 anyway. 

What I cannot figure out is if I simply MUST use Grunt or if there is another way to get the ES6 code converted to a module in the format needed for Moodle. Our team already has a couple processors in place and I hesitate to require anyone who needs to work on our Moodle code to have to go through the time and effort to set up yet another workflow just to make small changes to Javascript. Our primary tool for processing is Prepros and I've tried having my ES6 code transpiled with Babel and Bundled with imports and required modules through that tool. But when I load the page, I get a console warning Uncaught Error: No define call for plugin_name/filename. 

Do I have to go through Grunt?

Average of ratings: -
In reply to Austin Powell

Re: ES6 AMD Modules and Grunt

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

You have to use grunt (or, reconstruct everything defined in the Moodle grunt file to work with your alternate build tool, but why do that?)

Using grunt is just a matter of doing npm install. More specifically.

  1. Install NVM (using NVM seems to be by far the easiest way to managed Node.)
  2. Use nvm to install the right version of Node.
  3. Do npm install (All the steps up to hear are a one-time thing).
  4. Then, any time you are working on Moodle JS, run npx grunt watch, and leave that running while you edit JS files.
Average of ratings: Useful (1)
In reply to Tim Hunt

Re: ES6 AMD Modules and Grunt

by Austin Powell -
Thanks
Our plugins are in individual repositories and I usually dev in that repository and SFTP it up to my development site as I go. When I tried running npx grunt watch I get the error that it couldn't "find local grunt". Do I need to install grunt in this repository folder on my local computer or do I need to be coding in a folder with all of the Moodle code and not just this plugin I'm working on?

From what I read here: https://docs.moodle.org/dev/Grunt#Using_Grunt_in_additional_plugins
It would seem to indicate I need the entirety of the Moodle codebase and can't just run grunt in my plugin directory. Is that accurate?
In reply to Austin Powell

Re: ES6 AMD Modules and Grunt

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
As far as I am aware, you need a full copy of the Moodle code to set up and run grunt (you can just check out your individual plugin repository into the appropriate subdirectory within a copy of Moodle).

Besides, if you have a full copy of Moodle running locally, it can be a lot easier to develop, especially if you have xdebug running to allow you to set breakpoints and step through your code ...