babel-plugin-transform-dynamic-imports-to-static-imports

babel-plugin-transform-dynamic-imports-to-static-imports

A transform to translate dynamic imports to static imports

Installation:

npm install babel-plugin-transform-dynamic-imports-to-static-imports

Usage:

with configuration file:

{
  "plugins": ["babel-plugin-transform-dynamic-imports-to-static-imports"]
}

Via CLI

babel --plugins babel-plugin-transform-dynamic-imports-to-static-imports script.js

via node API

require("@babel/core").transform("code", {
  plugins: ["babel-plugin-transform-dynamic-imports-to-static-imports"],
});

Example of Transform

input:

import * as zero from "./zero";
import "./one";

async function test() {
  import("./two");
  await import("./three");
  import("./four")
    .then((test) => {
      /* do something */
    })
    .then();
  await import("./five").then((test) => {
    /* do something */
  });
}

output:

import * as $$1 from "./five";
import * as $$0 from "./four";
import "./three";
import "./two";
import * as zero from "./zero";
import "./one";

async function test() {
  Promise.resolve($$0)
    .then((test) => {
      /* do something */
    })
    .then();
  await Promise.resolve($$1).then((test) => {
    /* do something */
  });
}

for more examples see test.js

Caveat

dynamic imports with dynamic paths do not have a static equivalent.

async function test() {
  import(`dynamic${test}`);
  await import(`dynamic${test}`);
  import(`dynamic${test}`)
    .then((test) => {
      /* do something */
    })
    .then();
  await import(`dynamic${test}`).then((test) => {
    /* do something */
  });
}

will output:

async function test() {
  import(`dynamic${test}`);
  await import(`dynamic${test}`);
  import(`dynamic${test}`)
    .then((test) => {
      /* do something */
    })
    .then();
  await import(`dynamic${test}`).then((test) => {
    /* do something */
  });
}

for more examples see test.js