UNPKG

2.82 kBMarkdownView Raw
1# babel-plugin-import
2
3Modular 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
25import { Button } from 'antd';
26ReactDOM.render(<Button>xxxx</Button>);
27
28 ↓ ↓ ↓ ↓ ↓ ↓
29
30var _button = require('antd/lib/button');
31ReactDOM.render(<_button>xxxx</_button>);
32```
33
34#### `{ "libraryName": "antd", style: "css" }`
35
36```javascript
37import { Button } from 'antd';
38ReactDOM.render(<Button>xxxx</Button>);
39
40 ↓ ↓ ↓ ↓ ↓ ↓
41
42var _button = require('antd/lib/button');
43require('antd/lib/button/style/css');
44ReactDOM.render(<_button>xxxx</_button>);
45```
46
47#### `{ "libraryName": "antd", style: true }`
48
49```javascript
50import { Button } from 'antd';
51ReactDOM.render(<Button>xxxx</Button>);
52
53 ↓ ↓ ↓ ↓ ↓ ↓
54
55var _button = require('antd/lib/button');
56require('antd/lib/button/style');
57ReactDOM.render(<_button>xxxx</_button>);
58```
59
60## Usage
61
62```bash
63npm install babel-plugin-import --save-dev
64```
65
66Via `.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
95For 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
118babel-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).