Browse Source

update babel-plugin-import document

pull/5134/head
afc163 8 years ago
parent
commit
02773874a8
  1. 1
      README-zh_CN.md
  2. 13
      README.md
  3. 11
      docs/react/introduce.en-US.md
  4. 31
      docs/react/introduce.zh-CN.md

1
README-zh_CN.md

@ -47,7 +47,6 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
## 浏览器支持
现代浏览器和 IE9 及以上。

13
README.md

@ -58,22 +58,25 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```js
// .babelrc or babel-loader option
{
"plugins": [["import", { libraryName: "antd", style: "css" }]]
"plugins": [
["import", { libraryName: "antd", style: "css" }] // `style: true` for less
]
}
```
Then you can import components from antd directly.
Then you can import components from antd, equivalent to import manually below.
```jsx
// import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from 'antd';
```
- Manual import
- Manually import
```jsx
import DatePicker from 'antd/lib/date-picker'; // just for js
import 'antd/lib/date-picker/style/css'; // with style
import DatePicker from 'antd/lib/date-picker'; // for js
import 'antd/lib/date-picker/style/css'; // for css
// import 'antd/lib/date-picker/style'; // that will import less
```
## Environment Support

11
docs/react/introduce.en-US.md

@ -111,11 +111,13 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```js
// .babelrc or babel-loader option
{
"plugins": [["import", { libraryName: "antd", style: "css" }]]
"plugins": [
["import", { libraryName: "antd", style: "css" }] // `style: true` for less
]
}
```
Then you can import components from antd directly.
Then you can import components from antd, equivalent to import manually below.
```jsx
// import js and css modularly, parsed by babel-plugin-import
@ -125,8 +127,9 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- Manually import
```jsx
import DatePicker from 'antd/lib/date-picker'; // just js
import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file
import DatePicker from 'antd/lib/date-picker'; // for js
import 'antd/lib/date-picker/style/css'; // for css
// import 'antd/lib/date-picker/style'; // that will import less
```
## Useful Links

31
docs/react/introduce.zh-CN.md

@ -102,12 +102,35 @@ ReactDOM.render(<DatePicker />, mountNode);
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
以下两种方法都可以达到按需加载的目的:
### 按需加载
- `import DatePicker from 'antd/lib/date-picker'`
- 配合插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 使用 `import { DatePicker } from 'antd';`
下面两种方式都可以只加载用到的组件。
> babel-plugin-import 支持 js 和 css 同时按需加载。
- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)(推荐)。
```js
// .babelrc or babel-loader option
{
"plugins": [
["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
]
}
```
然后只需从 antd 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。
```jsx
// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';
```
- 手动引入
```jsx
import DatePicker from 'antd/lib/date-picker'; // 加载 JS
import 'antd/lib/date-picker/style/css'; // 加载 CSS
// import 'antd/lib/date-picker/style'; // 加载 LESS
```
## 链接

Loading…
Cancel
Save