Babel plugin to cherry pick imports of es6 modules
Switch branches/tags
Nothing to show
Clone or download
Latest commit 3f8733f Dec 6, 2018

README.md

[DEPRECATED] babel-plugin-direct-import

Deprecation note.

build status npm version npm downloads Codecov

Babel plugin to cherry pick imports of es6 modules.

Babel 7 User?

If you want to use version for Babel 7 please check next branch.

Motivation

Tree shaking is awesome! And Rollup with webpack teams doing great job making it more better! But still not all libs can be "tree shaked" right now and as a developer I don't want to wait, I want to use sweet import { module } from "package" syntax right now without caring about final bundle size.

"But we already have babel-plugin-import and babel-transform-imports!"

Right! And this plugins are awesome! But they does not work with complicated structures like material-ui@next has. I started in babel-plugin-material-ui@next but soon this idea has grow up to create generic plugin that will work with any es6 package.

Installation

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

Example

In

import { TextField, SelectField, FlatButton } from "material-ui";
import {
  ActionAccessibility,
  ActionAccessible,
  ActionAccountBalance as BalanceIcon,
} from "material-ui/svg-icons";

Out

import TextField from "material-ui/TextField";
import SelectField from "material-ui/SelectField";
import FlatButton from "material-ui/FlatButton";
import ActionAccessibility from "material-ui/svg-icons/action/accessibility";
import ActionAccessible from "material-ui/svg-icons/action/accessible";
import BalanceIcon from "material-ui/svg-icons/action/account-balance";

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    [
      "direct-import",
      [
        "my-package-name",
        {
          "name": "my-package-name/sub-package",
          "indexFile": "my-package-name/sub-package/index.es.js"
        }
      ]
    ]
  ]
}

Via Node API

require("babel-core").transform("code", {
  plugins: [
    [
      "direct-import",
      [
        "my-package-name",
        {
          name: "my-package-name/sub-package",
          indexFile: "my-package-name/sub-package/index.es.js",
        },
      ],
    ],
  ],
});

Limitations

Since this plugin just started to operate, It has it's limitations (PRs or suggestions are welcomed).

Transformation of namespace imports:

To keep it simple currently it ignores namespace imports.

import * as MUI from "material-ui";

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

Mapping of variable exports:

If index file of package exports a variable - you will have to disable mapping for it, otherwise plugin will throw package does not contain module errors.

e.g:

import foo from "./foo";

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

Tested Packages

Material UI

{
  "plugins": [
    [
      "direct-import",
      [
        "material-ui",
        {
          "name": "material-ui/svg-icons",
          "indexFile": "material-ui/svg-icons/index.es"
        }
      ]
    ]
  ]
}

Material UI Next

{
  "plugins": [["direct-import", ["material-ui"]]]
}

React Virtualized

{
  "plugins": [["direct-import", ["react-virtualized"]]]
}

React Router 3

{
  "plugins": [["direct-import", ["react-router"]]]
}

React Router 4

{
  "plugins": [["direct-import", ["react-router", "react-router-dom"]]]
}

Redux Form (Partial support)

{
  "plugins": [
    [
      "direct-import",
      [
        "redux-form",
        {
          "name": "redux-form/immutable",
          "indexFile": "redux-form/es/immutable"
        }
      ]
    ]
  ]
}

Thanks

Heavily inspired by: