Develop Reference

How to correctly configure experimental ECMAScript module so import/export can be used in Node.js

Time is flying and now the Node.js ver.10.0.0 have been out for the public. While I'm working with my MERN stack, frequently I have to switch between ES6 import/export syntax for the front-end (React.JS) and the CommonJS module.exports/require syntax in my Node/Express server-side. And I'm really wish the writing style could be unified in import/export shortly without using Babel and get it from the native support.
A good news is since the last year I read James' post on Medium addressing in the difficulty of implementing the ES6 module system in Node.js, the experimental ECMAScript Modules is now in stability 1 for a while, which means it could be enabled by --experimental-modules flag.
However, when I'm trying to use import/export syntax on Node, it is never working. For example, I have try this:
import fs from 'fs';
console.log(typeof fs.readFile);
The above code will throw me error:
(function (exports, require, module, __filename, __dirname) { import fs from 'fs';
^^
SyntaxError: Unexpected identifier
I'm really sure I have enabled the experimental flag calling as $node --experimental-modules, so what should I really do in order to kick the ES6 import/export experimental module working on my Node local server? What am I missed?
Added:
The reason why I want to try this experimental feature is to have consistent coding style in both front and back. And because it is now available natively, so I want to get ready to it. Once it have been reach in stage 2, I then can adapted to import/export quickly and have less pain.
But obviously, Google (ref) and AirBnb(ref) have different view points upon if we should use import/export syntax or not in their code-style guide. And based on Google, I'm still surprising that the semantics of ES6 import/export is not yet finalized while ECMA2019 is on its way. I'm just wonder when I can really use import/export in my project, or what is really need to be finalized?
Updated:
After pointed out by Jaromanda X, if I changed my file name to .mjs then it works. Originally I thought is the module to be loaded have to be named in .mjs extension, but it seems I was wrong. However, if that is the case, which means I will need to renamed all my project file in .mjs... and that is not appealing. Just wonder if there is a way to use this feature it in the traditional .js file? What should I configure?

Right at this point ECMAScript Module is not yet finalized in node.js v10, so it is not recommended to use it in the production environment. Since the use of import/export is standardized in the ECMAScript specification, so no matter how, it is important for node to provide such supports for the community.
The major differences between require() and ECMAScript Module is how node is going to handle its cache. Unlike require(), so far ECMAScript Module have no such API to manipulate the module cache. Also, it is unknown if it would be directly supported in the normal *.js files without a loader, so stay tuned.
The direction right now is try to introduce a new *.mjs file to explicitly showing it used the standard JS module (in accordance with ES6), but if one read the doc closely you actually could see it is also possible to specify your own extension match, including the use of the more traditional *.js. However, it required more configurations and the use of --loader flag to load the extra configuration.
There are 6 different formats are supported, including the one for modules written in C++ (it can also be loaded by require()), which is very powerful. In short, to use *.js file extension, the key setting in the loader is to have:
const JS_EXTENSIONS = new Set(['.js', '.mjs']);
And the loader function will need to check as if the file to be loaded is in JS_EXTENSIONS data set. Here, the key in the loader function is that it should return an object that have two properties: url and format, i.e.:
return {
url: (...), // e.g. './x?n=1234'
format: 'esm', // there are 5 + 1 dynamic formatting
};
It would be recommended to named the loader as custom-loader.mjs, and use it as $node --experimental-modules --loader ./custom-loader.mjs since it was demonstrated in the official doc. Once you have configured the loader correctly (based on what you need), then you should be able to use import/export as if you may used in a front-end react app in your node project.

Getting ES6 to work in WebStorm

Any ideas on how to use ES6 on WebStorm 10?
Here's what I have done so far:
Installed Babel.
Activated Babel with Settings > Tools > File watchers. checked Babel checkbox.
Edit configurations > Before launch file watchers > + then 'Run File Watchers".
Set code as ES6
Changed my run configuration to use the compiled version.
Then created the following trivial piece of code:
require("babel/register");
function* count(n){
console.log(n);
}
This code shows up with no syntax errors, as it should. (A convenient way to make sure ES6 is turned on).
Run it (run the compiled version, actually), and get this ....
var marked0$0 = [count].map(regeneratorRuntime.mark);
^
ReferenceError: regeneratorRuntime is not defined
Why? How do I get it to precompile with Babel and then run? Isn't the regenerator supposed to be taken care of with this line:
require("babel/register");
(Windows 7, if that is important).

Babel's require hook requires you to have BABEL_CACHE_PATH environment variable. You might need to specify them as well in your File Watcher configuration in WebStorm.

I think there are two things you probably need to do to make it work based on the nature of the error you're describing.
npm install babel-core
add --optional runtime as an argument to the invocation of babel
This is based on what's described in some detail here.

The "require hook" only works on files that you require after registering it, but not on the file that registers the hook itself.
So this works:
// index.js
require('babel/register');
require('./count');
// count.js
function* count(n){
console.log(n);
};

Use TypeScript lib.core.d.ts instead of lib.d.ts

It seems the TypeScript compiler always includes lib.d.ts or lib.es6.d.ts (depending on the compiler target).
In our application we have a WebSocket class that is already defined in lib.d.ts. We're running our application under Node.js and not in a web browser, so we actually don't need all of the definitions from lib.d.ts. Instead lib.core.d.ts would be sufficient for us (and would solve the WebSocket conflict of course).
Is it possible to tell the TypeScript compiler which global type definition file to use?

Use --noLib compiler option to exclude lib.d.ts and then add reference to lib.core.d.ts in your source files.
Equivalent for tsconfig.json would be "noLib": true.
If you only need Node.js definitions, you can also use the Definitely Typed one.

Another solution might be to use lib like core-js. which has all the required polyfils for ES6. Note: you will also will need to add the core-js tsd file to your tsds.
Hope it helps.

not to minify the js when degugging the code minify-maven-plugin samaxes

I am using minify-maven-plugin of com.samaxes.maven to minify my js files and to make package into a single file. But during the development/debugging i need to set a configuration so that it does not minify the js but still packages the js in a single file. Please help me.

According to the documentation as of 1.5.2 you can specify
<skipMinify>true</skipMinify>
If you use a property then you can provide a default value in the pom and override it on the command line. Or you could use a clever combination of profiles and their activations to automatically set it depending on your environment (for example, CI vs development).

How can i get Object.assign() to work in the browser when using 6to5?

I'm using the 6to5 transpiler. When I try to use Object.assign() in my code, I get the following error: Uncaught TypeError: Object.assign is not a function. How can I enable this functionality?

In the latest release, where 6to5 has been renamed to Babel, you no longer need to do this. You can either configure it to use a polyfill or load the runtime. This is how I have set it up in gulp:
browserify({debug : true})
.transform(
// We want to convert JSX to normal javascript
babelify.configure({
// load the runtime to be able to use Object.assign
optional: ["runtime"]
})
);
You configuration should be pretty similar, no matter what tool you use. Using the package standalone would look like this:
require("babel").transform("code", { optional: ["runtime"] });
You can look at the documentation for runtime. Remember to update to the latest version of babel, though! It updates very frequently.

You have to include the browser-polyfill.js file:
Available from the browser-polyfill.js file within the 6to5 directory of an npm release. This needs to be included before all your compiled 6to5 code. You can either prepend it to your compiled code or include it in a <script> before it.
NOTE: Do not require this via browserify etc, use 6to5/polyfill.
http://6to5.org/docs/usage/polyfill/