Have ideas to improve npm?Join in the discussion! »

    babel-plugin-direct-import

    0.6.3 • Public • Published

    babel-plugin-direct-import

    Build npm version npm downloads Codecov

    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:

    Keywords

    none

    Install

    npm i babel-plugin-direct-import

    DownloadsWeekly Downloads

    3,342

    Version

    0.6.3

    License

    MIT

    Unpacked Size

    91.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar