1.13.8 • Published 8 months ago

babel-plugin-import v1.13.8

Weekly downloads
316,299
License
MIT
Repository
github
Last release
8 months ago

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"}, "antd"],
  ["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`;
      }
    }
]

styleLibraryDirectory

  • ["import", { "libraryName": "element-ui", "styleLibraryDirectory": "lib/theme-chalk" }]: import js and css modularly

If styleLibraryDirectory is provided (default null), it will be used to form style file path, style will be ignored then. e.g.

{
  "libraryName": "element-ui",
  "styleLibraryDirectory": "lib/theme-chalk",
}

import { Button } from 'element-ui';

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('element-ui/lib/button');
require('element-ui/lib/theme-chalk/button');

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, file: object) => {
        const filename = file.opts.filename;
        if (name === 'TimePicker'){
          return 'antd/lib/custom-time-picker';
        }
        if (filename.indexOf('/path/to/my/different.js') >= 0) {
          return 'antd/lib/custom-name';
        }
        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}`;
};

customStyleName

customStyleName works exactly the same as customName, except that it deals with style file path.

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.

dumi-demo-chrisbob@bsolution/dev@bsolution/scripts@gd-uikit/react-scriptscsm-ui@christensena/react-scripts@christensena/react-scripts-tschenhongtestdg-table-gesignyunyi-component-reactmodified-form-designspa-build-corexdf-ntreact-antd-scripts-newgry-ns-logingry-ns-publishvideo-clipvideo-clip-lhandywebpackdoki-scriptxhm-pack-test1xhm-pack-test10xhm-pack-test12xhm-pack-test14xhm-pack-test2xhm-pack-test3xhm-pack-test5xhm-pack-test6xhm-pack-test7xhm-pack-test8xhm-pack-test9mio-cli-serviceyadong-reactbrick-webpackjs-boilerplate-antdstart-kit-builder-flexiblegintonictest-clipxy-video-clipreact-components-common-librarylg-react-ssrlg-react-ssr-componenthuohua-fedelivery-flow-chartlm-vue2-libsweb-bootreactjs-basic-templategry-test-publishgbi-kitgbi-uikitsupermario-cliredarksuper-mario-cliqie-form-designmath-format-eastedulcyhy-react-componentprocredit-bank-design-system2ycl-testprocredit-bank-design-systemedith_li_test@ewcli/babel-preset-app@hackkun/clirube-tools@cyber-work/spa-cliyyd_modulesad-preview-toolpreviewtooladfdp-uidw-mx-packing-toolsx-form-designerptx-ant-design-vue@guomio/cli-servicepanda-scaffolddemiomodified-form-design-guireact-web-components-for-testreact-web-components-testyouzanyun_hkmy-phone-loginwheat-b-componentswheat-common-web-compartsssrootzxartzzzarts-zxart-zxecarx-buildsupremind-componenttemp2-test-scriptspower-form-designauto-too-cli@yoteam/toolplugin-form-designtest-npm-demo1antdeco-react-scripts@willhayes/want-cli@xiangyin1987/jm-cli@nghiepuit/sdk-builderofficial-websitebase-sdk-builder
1.13.8

8 months ago

1.13.7

8 months ago

1.13.6

1 year ago

1.13.5

2 years ago

1.13.4

2 years ago

1.13.3

3 years ago

1.13.3-beta.1

3 years ago

1.13.2

3 years ago

1.13.1

3 years ago

1.13.0

4 years ago

1.12.2

5 years ago

1.12.1

5 years ago

1.12.0

5 years ago

1.11.2

5 years ago

1.11.1

5 years ago

1.11.0

5 years ago

1.10.0

5 years ago

1.9.1

6 years ago

1.9.0

6 years ago

1.8.0

6 years ago

1.7.0

6 years ago

1.6.7

6 years ago

1.6.6

6 years ago

1.6.5

6 years ago

1.6.4

6 years ago

1.6.3

6 years ago

1.6.3-beta.1

6 years ago

1.6.2

6 years ago

1.6.1

6 years ago

1.6.0

7 years ago

1.5.0

7 years ago

1.4.0

7 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.0.0

8 years ago