@gutenye/babel-plugin-transform-imports v1.1.12

babel-plugin-transform-imports

forked from https://bitbucket.org/amctheatres/babel-transform-imports

• add replace option

{
  'react-icons': {
    transform: 'react-icons/lib/${member}',
    replace: ['^(..)-', '$1/'],
    kebabCase: true,
  }
}

import { MdCheck, FaCheck } from 'react-icons'
->
import MdCheck from 'react-icons/lib/md/check'
import FaCheck from 'react-icons/lib/fa/check'

Install

npm install @gutenye/babel-transform-imports

Transforms member style imports:

    import { Row, Grid as MyGrid } from 'react-bootstrap';
    import { merge } from 'lodash';

...into default style imports:

    import Row from 'react-bootstrap/lib/Row';
    import MyGrid from 'react-bootstrap/lib/Grid';
    import merge from 'lodash/merge';

That's stupid, why would you do that?

When Babel encounters a member style import such as:

    import { Grid, Row, Col } from 'react-bootstrap';

it will generate something similarish to:

    var reactBootstrap = require('react-bootstrap');
    var Grid = reactBootstrap.Grid;
    var Row = reactBootstrap.Row;
    var Col = reactBootstrap.Col;

Some libraries, such as react-bootstrap and lodash, are rather large and pulling in the entire module just to use a few pieces would cause unnecessary bloat to your client optimized (webpack etc.) bundle. The only way around this is to use default style imports:

    import Grid from 'react-bootstrap/lib/Grid';
    import Row from 'react-bootstrap/lib/Row';
    import Col from 'react-bootstrap/lib/Col';

But, the more pieces we need, the more this sucks. This plugin will allow you to pull in just the pieces you need, without a separate import for each item. Additionally, it can be configured to throw when somebody accidentally writes an import which would cause the entire module to resolve, such as:

    import Bootstrap, { Grid } from 'react-bootstrap';
    // -- or --
    import * as Bootstrap from 'react-bootstrap';

Installation

npm install --save-dev babel-plugin-transform-imports

Usage

In .babelrc:

    {
        "plugins": [
            ["transform-imports", {
                "react-bootstrap": {
                    "transform": "react-bootstrap/lib/${member}",
                    "preventFullImport": true
                },
                "lodash": {
                    "transform": "lodash/${member}",
                    "preventFullImport": true
                }
            }]
        ]
    }

That's it!

Note: this plugin is not restricted to the react-bootstrap and lodash libraries. You may use it with any library, where the options keys (react-bootstrap and lodash above) are the actual names of the libraries.

Options