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

transform dynamic import to static imports

Usage no npm install needed!

<script type="module">
  import babelPluginTransformDynamicImportsToStaticImports from 'https://cdn.skypack.dev/babel-plugin-transform-dynamic-imports-to-static-imports';
</script>

README

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

npm build

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