babel-plugin-import-7

Component modular import plugin for babel.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-import-7
3,0161231.6.75 years ago5 years agoMinified + gzip package size for babel-plugin-import-7 in KB

Readme

babel-plugin-import
Modular import plugin for babel, compatible with antd, antd-mobile, and so on.
NPM version Build Status

Why babel-plugin-import

Where to add babel-plugin-import

Example

{ "libraryName": "antd" }

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);

{ "libraryName": "antd", style: "css" }

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx</_button>);

{ "libraryName": "antd", style: true }

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);

Note : with style: true css source files are imported and optimizations can be done during compilation time. With style: "css", pre bundled css files are imported as they are.
style: true can reduce the bundle size significantly, depending on your usage of the library.

Usage

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

Via .babelrc or babel-loader.
{
  "plugins": [["import", options]]
}

options

options can be object.
{
  "libraryName": "antd",
  "style": true,   // or 'css'
}

{
  "libraryName": "material-ui",
  "libraryDirectory": "components",  // default: lib
  "camel2DashComponentName": false,  // default: true
}

options can be an array.
For Example:
[
  {
    "libraryName": "antd",
    "libraryDirectory": "lib",   // default: lib
    "style": true
  },
  {
    "libraryName": "antd-mobile"
  },
]

style

  • ["import", { "libraryName": "antd" }]: import js modularly
  • ["import", { "libraryName": "antd", "style": true }]: import js and css modularly (LESS/Sass source files)
  • ["import", { "libraryName": "antd", "style": "css" }]: import js and css modularly (css built files)

Note

babel-plugin-import will not work properly if you add the library to the webpack config vendor.