Neurologically Paralyzing Mouseovers

    babel-plugin-import-refined

    1.12.1 • Public • Published

    babel-plugin-import

    Modular import plugin for babel, compatible with antd, antd-mobile, lodash, material-ui, 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": "lodash",
      "libraryDirectory": "",
      "camel2DashComponentName": false,  // default: true
    }
    {
      "libraryName": "@material-ui/core",
      "libraryDirectory": "components",  // default: lib
      "camel2DashComponentName": false,  // default: true
    }

    ~options can be an array.~ It's not available in babel@7+

    For Example:

    [
      {
        "libraryName": "antd",
        "libraryDirectory": "lib",   // default: lib
        "style": true
      },
      {
        "libraryName": "antd-mobile"
      },
    ]

    Options can't be an array in babel@7+, but you can add plugins with name to support multiple dependencies.

    For Example:

    // .babelrc
    "plugins": [
      ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"],
      ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "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)

    If option style is a Function, babel-plugin-import will auto import the file which filepath equal to the function return value. This is useful for the components library developers.

    e.g.

    • ["import", { "libraryName": "antd", "style": (name) => `${name}/style/2x` }]: import js and css modularly & css file path is ComponentName/style/2x

    If a component has no style, you can use the style function to return a false and the style will be ignored.

    e.g.

    [
      "import",
        {
          "libraryName": "antd",
          "style": (name: string, file: Object) => {
            if(name === 'antd/lib/utils'){
              return false;
            }
            return `${name}/style/2x`;
          }
        }
    ]

    customName

    We can use customName to customize import file path.

    For example, the default behavior:

    import { TimePicker } from "antd"
    ↓ ↓ ↓ ↓ ↓ ↓
    var _button = require('antd/lib/time-picker');

    You can set camel2DashComponentName to false to disable transfer from camel to dash:

    import { TimePicker } from "antd"
    ↓ ↓ ↓ ↓ ↓ ↓
    var _button = require('antd/lib/TimePicker');

    And finally, you can use customName to customize each name parsing:

    [
      "import",
        {
          "libraryName": "antd",
          "customName": (name: string) => {
            if (name === 'TimePicker'){
              return 'antd/lib/custom-time-picker';
            }
            return `antd/lib/${name}`;
          }
        }
    ]

    So this result is:

    import { TimePicker } from "antd"
    ↓ ↓ ↓ ↓ ↓ ↓
    var _button = require('antd/lib/custom-time-picker');

    In some cases, the transformer may serialize the configuration object. If we set the customName to a function, it will lost after the serialization.

    So we also support specifying the customName with a JavaScript source file path:

    [
      "import",
        {
          "libraryName": "antd",
          "customName": require('path').resolve(__dirname, './customName.js')
        }
    ]

    The customName.js looks like this:

    module.exports = function customName(name) {
      return `antd/lib/${name}`;
    };

    transformToDefaultImport

    Set this option to false if your module does not have a default export.

    Note

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

    Install

    npm i babel-plugin-import-refined

    DownloadsWeekly Downloads

    0

    Version

    1.12.1

    License

    MIT

    Unpacked Size

    30 kB

    Total Files

    6

    Last publish

    Collaborators

    • fantasyshao