babel-plugin-module-extension-resolver

babel-plugin-module-extension-resolver

Babel plugin that resolves and maps module extensions.

Inspired by babel-plugin-extension-resolver.

Examples

By default, all extensions except .json is converted into .js. This behavior can be customized by options.

JavaScript

Directory structure:

src
├ dir
│ ├ index.js
│ └ lib.js
├ main.js
└ settings.json

Input (main.js):

require("./dir/lib");
require("./dir/lib.js");    // file exists
require("./dir");           // directory has "index.js"
require("./settings");      // ".json" extension
require("./no-such-file");  // file NOT exists
require("dir");             // not begins with "."

Output:

require("./dir/lib.js");
require("./dir/lib.js");
require("./dir/index.js");
require("./settings.json");
require("./no-such-file");
require("dir");

JavaScript (.mjs extension)

Directory structure:

src
├ dir
│ ├ index.mjs
│ └ lib.mjs
└ main.mjs

.babelrc:

{
  "presets": [
    ["@babel/preset-env", {"modules": false}]
  ],
  "plugins": [
    ["module-extension-resolver", {
      "extensionsToKeep": [".mjs", ".json"]
    }]
  ]
}

Input (main.mjs):

import "./dir/lib";
import "./dir";

export * from "./dir";

async function foo() {
    await import("./dir/lib");
}

Run:

babel src --keep-file-extension

Output:

import "./dir/lib.mjs";
import "./dir/index.mjs";

export * from "./dir/index.mjs";

async function foo() {
    await import("./dir/lib.mjs");
}

TypeScript

Directory structure:

src
├ dir
│ ├ index.ts
│ └ lib.ts
└ main.ts

Input (main.ts):

import "./dir/lib";
import "./dir";

Output:

import "./dir/lib.js";
import "./dir/index.js";

For complete project, see below examples.

Language	CommonJS	ES Modules
ECMAScript with @babel/preset-env	babel-cjs	babel-esm
TypeScript with @babel/preset-typescript	ts-babel-cjs	ts-babel-esm
TypeScript with tsc and Babel	ts-tsc-cjs	ts-tsc-esm

Install

npm i -D babel-plugin-module-extension-resolver

.babelrc

{
  "plugins": ["module-extension-resolver"]
}

With options:

{
  "plugins": [
    ["module-extension-resolver", {
      "srcExtensions": [".js", ".cjs", ".mjs", ".es", ".es6", ".ts", ".node", ".json"],
      "dstExtension": ".js",
      "extensionsToKeep": [".json"]
    }]
  ]
}

Options

srcExtensions

source extensions to resolve

defaults:

[
  ".js",
  ".cjs",
  ".mjs",
  ".es",
  ".es6",
  ".ts",
  ".node",
  ".json"
]

dstExtension

destination extension

defaults:

".js"

extensionsToKeep

extension to keep

defaults:

[
  ".json"
]

Changelog

See CHANGELOG.md.