1 | # babel-plugin-import
|
2 |
|
3 | Modular import plugin for babel, compatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](https://github.com/ant-design/ant-design-mobile), and so on.
|
4 |
|
5 | [![NPM version](https://img.shields.io/npm/v/babel-plugin-import.svg?style=flat)](https://npmjs.org/package/babel-plugin-import)
|
6 | [![Build Status](https://img.shields.io/travis/ant-design/babel-plugin-import.svg?style=flat)](https://travis-ci.org/ant-design/babel-plugin-import)
|
7 |
|
8 | ----
|
9 |
|
10 | ## Why babel-plugin-import
|
11 |
|
12 | - [English Instruction](https://ant.design/docs/react/getting-started#Import-on-Demand)
|
13 | - [中文说明](https://ant.design/docs/react/getting-started-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)
|
14 |
|
15 | ## Where to add babel-plugin-import
|
16 |
|
17 | - [babelrc](https://babeljs.io/docs/usage/babelrc/)
|
18 | - [babel-loader](https://github.com/babel/babel-loader)
|
19 |
|
20 | ## Example
|
21 |
|
22 | #### `{ "libraryName": "antd" }`
|
23 |
|
24 | ```javascript
|
25 | import { Button } from 'antd';
|
26 | ReactDOM.render(<Button>xxxx</Button>);
|
27 |
|
28 | ↓ ↓ ↓ ↓ ↓ ↓
|
29 |
|
30 | var _button = require('antd/lib/button');
|
31 | ReactDOM.render(<_button>xxxx</_button>);
|
32 | ```
|
33 |
|
34 | #### `{ "libraryName": "antd", style: "css" }`
|
35 |
|
36 | ```javascript
|
37 | import { Button } from 'antd';
|
38 | ReactDOM.render(<Button>xxxx</Button>);
|
39 |
|
40 | ↓ ↓ ↓ ↓ ↓ ↓
|
41 |
|
42 | var _button = require('antd/lib/button');
|
43 | require('antd/lib/button/style/css');
|
44 | ReactDOM.render(<_button>xxxx</_button>);
|
45 | ```
|
46 |
|
47 | #### `{ "libraryName": "antd", style: true }`
|
48 |
|
49 | ```javascript
|
50 | import { Button } from 'antd';
|
51 | ReactDOM.render(<Button>xxxx</Button>);
|
52 |
|
53 | ↓ ↓ ↓ ↓ ↓ ↓
|
54 |
|
55 | var _button = require('antd/lib/button');
|
56 | require('antd/lib/button/style');
|
57 | ReactDOM.render(<_button>xxxx</_button>);
|
58 | ```
|
59 |
|
60 | ## Usage
|
61 |
|
62 | ```bash
|
63 | npm install babel-plugin-import --save-dev
|
64 | ```
|
65 |
|
66 | Via `.babelrc` or babel-loader.
|
67 |
|
68 | ```js
|
69 | {
|
70 | "plugins": [["import", options]]
|
71 | }
|
72 | ```
|
73 |
|
74 | ### options
|
75 |
|
76 | `options` can be object.
|
77 |
|
78 | ```javascript
|
79 | {
|
80 | "libraryName": "antd",
|
81 | "style": true, // or 'css'
|
82 | }
|
83 | ```
|
84 |
|
85 | ```javascript
|
86 | {
|
87 | "libraryName": "material-ui",
|
88 | "libraryDirectory": "components", // default: lib
|
89 | "camel2DashComponentName": false, // default: true
|
90 | }
|
91 | ```
|
92 |
|
93 | `options` can be an array.
|
94 |
|
95 | For Example:
|
96 |
|
97 | ```javascript
|
98 | [
|
99 | {
|
100 | "libraryName": "antd",
|
101 | "libraryDirectory": "lib", // default: lib
|
102 | "style": true
|
103 | },
|
104 | {
|
105 | "libraryName": "antd-mobile"
|
106 | },
|
107 | ]
|
108 | ```
|
109 |
|
110 | ### style
|
111 |
|
112 | - `["import", { "libraryName": "antd" }]`: import js modularly
|
113 | - `["import", { "libraryName": "antd", "style": true }]`: import js and css modularly (LESS/Sass source files)
|
114 | - `["import", { "libraryName": "antd", "style": "css" }]`: import js and css modularly (css built files)
|
115 |
|
116 | ### Note
|
117 |
|
118 | babel-plugin-import will not work properly if you add the library to the webpack config [vendor](https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code).
|