babel-plugin-shaking-import v0.4.0

babel-plugin-shaking-import

Modular import plugin for babel, compatible with antd, antd-mobile, lodash, and so on.

Changelog

• ShakingImportOptions add property libraryNameImport since v0.4.0.
• ShakingImportOptions property style transform into libraryStyle

Usage

Install:

# npm
npm install babel-plugin-shaking-import --save-dev
# yarn
yarn add babel-plugin-shaking-import --dev

Add babel plugin:

{
  "plugin": [
    ["shaking-import", {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "libraryStrategy": "camel2dash",  
      "libraryStyle": true    
    }]
  ]
}

options can be an object of ShakingImportOptions, or an array of ShakingImportOptions:

/**
 * @typedef {object} ShakingImportOptions
 *
 * @property {string} libraryName - reuqired
 * @property {string} libraryDirectory - optional, defualt lib
 * @property {boolean} libraryNameImport - whether import namespace specifier
 * @property {string} libraryStrategy - optional, default preserve, enum strategy preserve, camel2dash, camel2underline
 * @property {string|boolean} libraryOverride - optional, default false, replace module name in rare condition, like lodash within jest while lodash-es within rollup
 * @property {string|boolean} libraryStyle - optional, default false
 */

Example

[
  {
    "libraryName": "antd",
    "libraryStrategy": "camel2dash",
    "libraryStyle": true
  },
  {
    "libraryName": "lodash",
    "libraryDirectory": "."
  },
  {
    "libraryName": "rxjs",
    "libraryDirectory": ".",
    "libraryNameImport": true
  },
  {
    "libraryName": "react-toolbox",
    "libraryStrategy": "camel2underline"
  }  
]

Showcase

rxjs shaking:

import { Observable, Subject } from 'rxjs';

// Normal import
import 'rxjs/observable/interval'
import 'rxjs/observable/zip';

const trigger$ = Reflect.construct(Subject, []);
const timer$ = Observable.interval(1000);

Observable.zip(trigger$, timer$).subscribe((value) => {
  console.log(value);
});

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

// Normal import
import 'rxjs/observable/interval';
import 'rxjs/observable/zip';

const trigger$ = Reflect.construct(Subject, []);
const timer$ = Observable.interval(1000);

Observable.zip(trigger$, timer$).subscribe(value => {
  console.log(value);
});

antd shaking:

import { Button, DatePicker, message } from 'antd';

message.info('babel-plugin-shaking-import');

ReactDOM.render(<div>
  <DatePicker/>
  <Button>babel-plugin-shaking-import</Button>
</div>);

import 'antd/lib/button/style/css';
import Button from 'antd/lib/button';
import 'antd/lib/date-picker/style/css';
import DatePicker from 'antd/lib/date-picker';
import 'antd/lib/message/style/css';
import message from 'antd/lib/message';

message.info('babel-plugin-shaking-import');

ReactDOM.render(React.createElement(
  'div',
  null,
  React.createElement(DatePicker, null),
  React.createElement(
    Button,
    null,
    'babel-plugin-shaking-import'
  )
));

License

MIT