babel-plugin-esm-native-imports v1.0.1

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:

• https://unpkg.com/react@latest/umd/react.development.js
• https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
• etc

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