<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kaushik Evani</title>
    <description>The latest articles on DEV Community by Kaushik Evani (@kau).</description>
    <link>https://dev.to/kau</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F111777%2Fa15d5cd9-bd21-42b5-b08f-e334b987cfe1.png</url>
      <title>DEV Community: Kaushik Evani</title>
      <link>https://dev.to/kau</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kau"/>
    <language>en</language>
    <item>
      <title>Best way to use ES Modules in Node.js as of today</title>
      <dc:creator>Kaushik Evani</dc:creator>
      <pubDate>Sun, 14 Jul 2019 19:25:12 +0000</pubDate>
      <link>https://dev.to/kau/best-way-to-use-es-modules-in-node-js-as-of-today-9oe</link>
      <guid>https://dev.to/kau/best-way-to-use-es-modules-in-node-js-as-of-today-9oe</guid>
      <description>&lt;p&gt;The other day I started to write a basic server for some hobby project in Node.js and realised that I had gotten pretty used to using ES style module imports, and that the lack of it in Node.js was irksome. This post is a result of my subsequent research into it.&lt;/p&gt;

&lt;h3&gt;
  
  
  What Node.js says you can do
&lt;/h3&gt;

&lt;p&gt;In the current stable version of Node.js (10.16), the ES modules are in "experimental" feature. Therefore to use it, you would have to use the &lt;br&gt;
&lt;code&gt;--experimental-modules&lt;/code&gt; flag and the file should be saved with a &lt;code&gt;.mjs&lt;/code&gt; extension.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;$ node --experimental-modules app.mjs&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In the latest release of Node(12.6), you can keep the extension of the file as &lt;code&gt;.js&lt;/code&gt; but add &lt;code&gt;"type": "module"&lt;/code&gt; in the nearest &lt;code&gt;package.json&lt;/code&gt;. For more info check &lt;a href="https://nodejs.org/dist/latest-v12.x/docs/api/esm.html#esm_ecmascript_modules" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Problems with this
&lt;/h3&gt;

&lt;p&gt;The ES modules and the CommonJS modules are mutually exclusive. You cannot mix and match &lt;code&gt;require&lt;/code&gt; and &lt;code&gt;import&lt;/code&gt; in a &lt;code&gt;.mjs&lt;/code&gt; file. The obvious problem here is when you have existing boilerplate &lt;code&gt;node_module&lt;/code&gt; requires, all of which you have to update to something like &lt;code&gt;import * as ...&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For example, if I wanted to import my api handlers the ES module way and leave the other boilerplate as it is, it WILL NOT WORK.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    var express = require('express')
    var router = express.Router();
    import { GetHandler, PostHandler } from './handlers';

    router.get('/:id?', GetHandler);
    router.post('/', PostHandler);

    module.exports = router
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Even if you have a medium sized project, you would end up spending a lot of time changing requires and file names for a lot of files, which is just not right.&lt;/p&gt;
&lt;h3&gt;
  
  
  One solution
&lt;/h3&gt;

&lt;p&gt;Use babel.&lt;br&gt;
We've all been using babel for front-end projects forever. But for the server-side, we don't have to worry about developing for different target browsers etc. You'll most likely be using one of the recent versions of Node and therefore only have to transpile down to that. But even then I felt babel is a bit of an overkill for what we are trying to achieve here.&lt;/p&gt;
&lt;h3&gt;
  
  
  Best solution for this use case: Sucrase (&lt;a href="https://github.com/alangpierce/sucrase" rel="noopener noreferrer"&gt;github&lt;/a&gt;)
&lt;/h3&gt;

&lt;p&gt;"Sucrase is an alternative to Babel that allows super-fast development builds."&lt;/p&gt;

&lt;p&gt;Sucrase doesn't cater to all use cases. It assumes you are developing for recent versions of the browser or Node.js and therefore does only a subset of the work babel does, making it automatically faster. According to them it is 20x faster than babel!&lt;/p&gt;

&lt;p&gt;Here's a dev.to article on sucrase&lt;/p&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/iriskatastic" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F31844%2F8c7ae665-97b4-4945-bb68-92ab3739bbfa.jpeg" alt="iriskatastic"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/iriskatastic/sucrase-is-a-super-fast-alternative-to-babel-4ih0" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Sucrase is a super-fast alternative to Babel&lt;/h2&gt;
      &lt;h3&gt;Iren Korkishko ・ Jun 27 '18&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#babel&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#typescript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;



&lt;p&gt;For more info, see their &lt;a href="https://github.com/alangpierce/sucrase" rel="noopener noreferrer"&gt;github&lt;/a&gt; page.&lt;/p&gt;

&lt;p&gt;So for our use case, all we need to do, is use the sucrase require hook at the top of our app, and we are good to go!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    // server.js
    require('dotenv').config()
    if (process.env.NODE_ENV === 'development') 
        require('sucrase/register');

    const express = require('express')
    let app = express()
    const port = process.env.PORT;

    /**
     *  OTHER SERVER CODE
     */

    app.listen(port, () =&amp;gt; console.log(`Server listening on port ${port}...`));

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h5&gt;
  
  
  WARNING! It is not advised to use require hooks in production. For production, use the sucrase cli.
&lt;/h5&gt;

</description>
      <category>node</category>
      <category>es6</category>
      <category>javascript</category>
      <category>sucrase</category>
    </item>
  </channel>
</rss>
