Transpile to ES modules with Babel

While I was working on Navigo an issue popped out. It was about using the library in the context of Web Dev Server where we have everything in TypeScript. And something was not ok with Navigo. The npm package wasn't exported properly and we were keep getting a does not provide an export named 'default' error. It turned out the problem is that Navigo is not exported properly as ES module (also known as ESM).

Navigo has a standard setup involving Webpack and Babel. The scripts+configuration that I placed initially exported the library for the browser, UMD, and AMD formats. When I had to prepare an ES version I thought that a simple Babel transpilation will be enough. However when I run Babel over my code I got the following CommonJS version:

exports.__esModule = true;
exports.default = Navigo;

It took me some time to figure out my mistake and to nail the cli arguments of Babel. Here is the solution:

> babel src --no-babelrc --out-dir lib/es --extensions '.ts,.tsx' --ignore '**/*.spec.ts' --config-file ./.babelrc.es

Where .babelrc.es contains:

{
  "ignore": ["node_modules/**/*"],
  "presets": [
    ["@babel/preset-typescript"],
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-add-module-exports",
    "@babel/plugin-transform-classes"
  ]
}

The key bit is "modules": false.

The result is properly transpiled version of my TypeScript files that use ES module syntax.

P.S. If you are not into ES modules I'll suggest to check this syntax out because very soon it will hit the browser and node - Get Ready For ESM.