babel-plugin-import

在 Babel 配置中引入該插件棘钞，可以針對 antd, antd-mobile, lodash, material-ui等庫進行按需加載.

為什么需要 babel-plugin-import

• English Instruction
• 中文說明

如何在項目中添加 babel-plugin-import

• babelrc
• babel-loader

例子

{ "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>);

備注 : 配置 style: true 則在項目編譯階段月而，可以對引入的 antd 樣式文件進行編譯，從而可以壓縮打包尺寸殷勘；而配置style: "css", 則直接引入經過打包后的 antd 樣式文件

使用方式

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

通過 .babelrc 配置文件或者 babel-loader 模塊編程引入.

{
  "plugins": [["import", options]]
}

options

options can be object.

{
  "libraryName": "antd",
  "style": true,   // or 'css'
}

{
  "libraryName": "lodash",
  "libraryDirectory": "", //表示從庫的package.json的main入口；否則默認為lib文件夾
  "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

使用 customName 來自定義導入文件路徑.

插件默認導入文件的基礎路徑為 lib 目錄最爬，并且默認將引入的組件名轉換為按照"-"連接的結構:

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

設置 camel2DashComponentName 為 false來阻止組件名稱的轉換:

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

在 Babel 配置文件中铃岔，使用 customName 來自定義導入組件路徑:

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

上面編譯后的結果為:

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

transformToDefaultImport

如果打包后的模塊沒有default導出汪疮，則設置 false

備注

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

https://swift.ctolib.com/article/wiki/108814

babel-plugin-import-custom

針對iview做了額外的優(yōu)化，https://github.com/videring/babel-plugin-import-custom/blob/master/README.md