babel-plugin-direct-import

Babel plugin to cherry-pick ES module imports.

Installation

npm install --save-dev babel-plugin-direct-import

Example

In

import {
  Button,
  colors,
  makeStyles,
  ServerStyleSheets,
} from '@material-ui/core';
import { ChevronLeft, ChevronRight } from '@material-ui/icons';

Out

import Button from '@material-ui/core/esm/Button/index.js';
import * as colors from '@material-ui/core/esm/colors/index.js';
import makeStyles from '@material-ui/core/esm/styles/makeStyles.js';
import { ServerStyleSheets } from '@material-ui/styles/esm/index.js';
import ChevronLeft from '@material-ui/icons/esm/ChevronLeft.js';
import ChevronRight from '@material-ui/icons/esm/ChevronRight.js';

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": ["luxon", "@material-ui/core", "@material-ui/icons"]
      }
    ]
  ]
}

Via Node API

require('babel-core').transform('code', {
  plugins: [
    [
      'babel-plugin-direct-import',
      {
        modules: ['luxon', '@material-ui/core', '@material-ui/icons'],
      },
    ],
  ],
});

Limitations

Transformation of namespace imports:

Namespace imports are complicate to analyze, that's why we skip them.

import * as MUI from 'material-ui';

return (props) => <MUI.Checkbox {...props} />;

Mapping of variable exports:

import foo from './foo';

export const bar = foo.bar;
export const baz = foo.baz;
export const noop = () => {};

Tested Packages

Luxon

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": ["luxon"]
      }
    ]
  ]
}

Material UI

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": [
          "@material-ui/lab",
          "@material-ui/core",
          "@material-ui/icons",
          "@material-ui/styles"
        ]
      }
    ]
  ]
}

Migration

0.5.0 to 0.6.0

After migration to Babel v7 it's impossible to pass arrays as configs, and now you have to pass an object with modules property:

Before:

{
  "plugins": [["babel-plugin-direct-import", ["@material-ui/core"]]]
}

After:

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": ["@material-ui/core"]
      }
    ]
  ]
}

Thanks

Heavily inspired by:

• babel-plugin-date-fns
• babel-plugin-lodash
• babel-plugin-recharts
• babel-transform-imports
• babel-plugin-import