Develop Reference

Debugging JavaScript code that uses ES6 Modules

TL;DR: How can I access variables/functions/names that are defined in ES Modules from the debugger?
More context: I'm a relatively experienced JavaScript programmer, but new to Modules. I've followed the tutorial at MDN here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules. They have a good set of examples here: https://github.com/mdn/js-examples/tree/master/modules
In that collection, say in the "basic-modules" example, (live code here: https://mdn.github.io/js-examples/modules/basic-modules/) there is, for example, a function called random in the file modules/square.js. Suppose I want to execute that function in the debugger, just to try it out, or because it's my code and I want to test/debug it, or I want to demonstrate to another coder what the function does. All the stuff you expect to do in a REPL or debugger. Is there a way to do that? I've tried both the Firefox debugger and the Chrome debugger, with no luck.
Back in the pre-Modules era, that code would be put into the global namespace (making access easy) or it would be locked up in an IIFE (making access impossible) or maybe in some home-made module system (access depends). I am hoping that the new Modules system still allows the debugger access to the names inside modules.
Thanks.

It says in the docs:
Last but not least, let's make this clear — module features are imported into the scope of a single script — they aren't available in the global scope. Therefore, you will only be able to access imported features in the script they are imported into, and you won't be able to access them from the JavaScript console, for example. You'll still get syntax errors shown in the DevTools, but you'll not be able to use some of the debugging techniques you might have expected to use.
To take your example from before, you'll need to invoke that function from a scope where it is visible, i.e where it's been imported:
import { random } from 'path/to/square.js'
debugger; // you should be able to invoke random() from here

Rhino w. Closure compiler generating already existing functions

I'm using closure compiler to optimize a require.js project.
I'm using an "app.build.js" file like this method suggests:
http://requirejs.org/docs/optimization.html#wholeproject
the optimize option is set to "closure" and I run it in Java through Rhino like this:
java -classpath ./tools/lib/rhino/js.jar;./tools/lib/closure/compiler.jar org.mozilla.javascript.tools.shell.Main ./tools/require/r.js -o app.build.js dir=./temp optimize=closure
I'm using this config for closure compiler in app.build.js:
closure: {
CompilerOptions: {},
CompilationLevel: 'SIMPLE_OPTIMIZATIONS',
loggingLevel: 'WARNING'
}
After fixing some ERRORS due to the "use strict" rules, everything works fine and my project gets minified in one file.
This is when running the build on Window 10.
But if I run it on another machine (under Ubuntu 16.04), some methods are name "on" by closure compiler. Thus at runtime, when I try to register a listener using "this.on("EVENT"..."
It calls a random method and crash everything.
Note that "this.on" was defined in the parent class (using require extends mechanism). I've try to define it in the current class instead: closure compiler create another "on" method anyway, right next to it, which overrides the first one at runtime :'(
I'v tried to optimize only the corresponding file alone: The issue is still present, except another method is named "on", the other are named "o0" "oa" etc...
Has anyone ever exprience such a problem and do you know how to avoid it ?
Maybe some compiler options I'm not aware of?
I'm using closure-compiler v20180204 (current last one)
Edit:
Seems like closure compiler is not responsible here. Indeed, using closure comp in SIMPLE mode doesn't rename anything. and using closure compiler in ADVANCED mode by itself (java -jar closure.jar ...) is working just fine.
So the question is: do Rhino apply some renaming rules when using the optimization="closure" mode?
If it's the case, can we edit those rules in any mean?

Calling a function defined outside of the Javascript library

I am working on video.js library. I was trying to modify it, so that it uses a custom player instead of the HTML5 player.
So I replaced the function calls to play() etc with the calls to my custom player(say custFunc1()). These calls are defined in a separate javascript file: custPlayer.js.
So in my index.html file, I will first include the custPlayer.js file and then the built video.js file.
However the problem is that while building the video.js package using grunt, I get the error that custFunc1 is not defined and thus grunt is not able to create the video.js library.
Now I was able to find out from a colleague that adding
/* global custFunc1 */
at the beginning of the particular file in the video.js package from where I was calling custFunc1 resolves the issue. The grunt build succeeds and it works fine.
So what I want to know is:
How does this actually resolve the issue, since this is exactly like a comment in javascript, how does it treat this differently and understand that it indicating that the function definition will be present outside the library?
Is the word global some sort of keyword in javascript?
Are there other ways of achieving this apart from what I mentioned?
On a slightly different note, I wanted to ask if grunt is the rough equivalent of make ?

Your javascript is being linted as part of your grunt process, if you look at the root of your project folder you should see a file like .jshintrc or something along those lines (different depending on the linter).
Your current settings means that the linter is going through your .js files one at a time and if it comes across a variable or function from another files it's throwing the error your seeing. You can either turn off this check or add custFunc1 to an array of known global variables. In jshint you do it like so - https://github.com/gruntjs/grunt-contrib-jshint#jshintrc
{
"globals": {
"custFunc1": true
}
}
The globals will probably already be present in the file, so just add custFunc1: true to it.
Oh and to answer question 1 - the comment type syntax tells the linter to ignore it's settings for that current file, basically overriding the settings in the .jshintrc file.
2 - Yes it's a setting in jshintrc and your adding custFunc1 to it inside the file itself instead of globally in the .jshintrc file.
3 - Mentioned above.
4 - Never used maker but yes i believe its similar in that its a pre process tool

webstorm unresolved function or method for npm azure-storage (all azure modules)

WebStorm IDE having some issues with azure-storage intelligent coding does not find methods for that library (but the code works fine when executed).
image of unresolved function or method
Thank you in advance!

Per my experience, some issues for code completion or highlight hint not always mean the code exists errors, especially for Dynamic Language like JavaScript.
I tried to reproduce your issues, and I found some interesting things.
After I writed the code var azureStorage = require('azure-storage'), the code completion for the symbol azureStorage could not display the function suggestions for azure-storage module. WebStorm regard the varable azureStorage as a normal object, see below.
However, the code completion for any undeclared symbol will display all functions of all modules depended on the project after I commented the code var azureStorage = require('azure-storage'), see below. It seems that WebStorm default bind all functions of all modules with undeclared symbols automatically.
Although we can use the code completion in this way, the require code must be required when the code works.
For more details about Auto-completing code, you can refer to https://www.jetbrains.com/webstorm/help/auto-completing-code.html.

JSLint - problems importing packages

I am scripting java using rhino. I have few classes written in java that I am importing in javascript.
But, when I am validating javascript against JSLint, it invalidates javascript saying:
Problem at line 9 character 1: 'importPackage' was used before it was defined.
Here is the sample from my script:
importPackage(Packages.org.raj.test);
var test = "123";
I have selected the option: "Assume Rhino" as well but still, it shows up same error.
How should I deal with this problem?
Note that the ECMA standard doesn't cover communication with Java (or with any external object system for that matter).

I have explicitly added following line on top of my script
/*global importPackage: true */
and it works!

It looks like the "Assume Rhino" flag (aka rhino: true in the options directive) only predefines a few global variables for you, and importPackage isn't one of them. You can see the complete list in the code.
Paul's answer is basically the correct workaround – you just manually declare each extra global you use. This code passes JSLint cleanly:
/*global importPackage, Packages */
importPackage(Packages.org.raj.test);
var test = "123";