babel-plugin-esm-native-imports

Transforms imports for use with native browser ESM

Usage no npm install needed!

<script type="module">
  import babelPluginEsmNativeImports from 'https://cdn.skypack.dev/babel-plugin-esm-native-imports';
</script>

README

babel-plugin-native-esm-imports

Transforms webpack style imports into browser native ESM imports, where you are using some dist UMD versions of other modules. For example, say you have these modules already loaded into the browser:

You want to take an existing probject that is using webpack and compiling your modules from this format:

import React, { useState } from 'react';
import * as ReactRedux from 'react-redux';
import Button from '@material-ui/core/button';
import {Something} from 'legacyApp/something/component';
import {myComponent} from './components/mycomponent.js';

...into :

// the react import goes away since it's already defined (UMD loaded as script tag)
const { useState } = React;
const { Button } = MaterialUI;
import {something} from '/legacyApp/something/component';
import {myComponent} from './components/mycomponent.js';

Note: this plugin is not restricted to the react or material-ui. You may use it with any library.

Why?

If you want to use native browser ESM imports without any compilation step or webpack mucking around with your sources, or with a minimal compilation step such as just transforming JSX, e.g.

babel src/jsx --out-dir compiled/nojsx --plugins=@babel/plugin-transform-react-jsx,@babel/plugin-syntax-class-properties --no-babelrc

Installation

npm install --save-dev babel-plugin-native-esm-imports

Example Usage

In .babelrc:

{
  "plugins": [
    "@babel/plugin-transform-react-jsx",
    "@babel/plugin-syntax-class-properties",
    ["babel-plugin-esm-native-imports", {
      "rules": [
        {
          "match":"(legacyJs).*?",
          "replace": "/some/path/to/legacyJs"
        },
        {
          "match":"react-redux",
          "fromGlobal": "ReactRedux"
        },
        {
          "match":"redux-thunk",
          "fromGlobal": "ReduxThunk"
        },
        {
          "match":"redux",
          "fromGlobal": "Redux"
        },
        {
          "match":"react-dom",
          "fromGlobal": "ReactDOM"
        },
        {
          "match":"react",
          "fromGlobal": "React"
        },
        {
          "match":"@material-ui/.*",
          "fromGlobal":"MaterialUI",
          "propertyImport": true
        }
      ]
    }]
  ]
}

Options

Each option looks like

Name Type Required Default Description
match string no String or regexp to match for the name of the import module. e.g. the react in import React from 'react'
fromGlobal string no The global variable name exposed by your UMD module on window object e.g. because you imported the unpkg version of react, you have window.ReactDOM defined, so set fromGlobal to ReactDOM
replace string no If you have a regexp group in the match part, it will be replaced with this string
propertyImport boolean no false When set to true, forces imports to be property imports e.g. const {foo} = fromGlobal