diff --git a/README-zh_CN.md b/README-zh_CN.md index e1cfe79093..fb3cf5db99 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -33,7 +33,7 @@ ReactDOM.render(, mountNode); import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ``` -按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。 +按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。 ## 浏览器支持 diff --git a/README.md b/README.md index bfdb327e4a..1dc1a55958 100644 --- a/README.md +++ b/README.md @@ -41,19 +41,19 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ### Use modularized antd -- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended) +- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) ```js // .babelrc { - "plugins": [["antd", { style: "css" }]] + "plugins": [["import", { libraryName: "antd", style: "css" }]] } ``` Then you can import components from antd directly. ```jsx - // import js and css modularly, parsed by babel-plugin-antd + // import js and css modularly, parsed by babel-plugin-import import { DatePicker } from 'antd'; ``` diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index 12e81c89a5..66835c5ef9 100644 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -157,13 +157,13 @@ If we import a component like this `import { Button } from 'antd';`, then all th import Button from 'antd/lib/button'; ``` -If you use `babel`, we recommend to use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd). This plugin will convert the following code to the above form: +If you use `babel`, we recommend to use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import). This plugin will convert the following code to the above form: ```jsx import { Button } from 'antd'; ``` -And this plugin can also load styles on demand. See the [usage](https://github.com/ant-design/babel-plugin-antd#usage) for further details. +And this plugin can also load styles on demand. See the [usage](https://github.com/ant-design/babel-plugin-import#usage) for further details. ## Customization diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index 05a3542c3c..b4cee1a340 100644 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -153,13 +153,13 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 import Button from 'antd/lib/button'; ``` -如果你使用 babel,我们推荐使用 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) 来进行按需加载,加入这个插件后。你可以仍然这么写: +如果你使用 babel,我们推荐使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载,加入这个插件后。你可以仍然这么写: ```jsx import { Button } from 'antd'; ``` -插件会帮你转换成上面的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-antd#usage) 属性可以做到模块样式的按需自动加载。 +插件会帮你转换成上面的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。 ## 配置案例 diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index ccb75cbed4..32172b1168 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -53,9 +53,9 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' You can use: - `import DatePicker from 'antd/lib/date-picker';` -- `import { DatePicker } from 'antd';` when [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) is also used. +- `import { DatePicker } from 'antd';` when [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is also used. -> babel-plugin-antd supports importing components and styles on demand. +> babel-plugin-import supports importing components and styles on demand. ## Version diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index 40f4a70669..49672af6a8 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -53,9 +53,9 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' 以下两种方法都可以达到按需加载的目的: - `import DatePicker from 'antd/lib/date-picker'` -- 配合插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) 使用 `import { DatePicker } from 'antd';` +- 配合插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 使用 `import { DatePicker } from 'antd';` -> babel-plugin-antd 支持 js 和 css 同时按需加载。 +> babel-plugin-import 支持 js 和 css 同时按需加载。 ## 版本 diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md index 6f8117e5ed..aab2df462d 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/practical-projects.en-US.md @@ -49,17 +49,18 @@ Open http://localhost:8989 in your browser, you will see dva welcome page. ## Integrate antd -Install `antd` and `babel-plugin-antd` with npm. `babel-plugin-antd` is used to automatically import scripts and stylesheets from antd. See [repo](https://github.com/ant-design/babel-plugin-antd) 。 +Install `antd` and `babel-plugin-import` with npm. `babel-plugin-import` is used to automatically import scripts and stylesheets from antd. See [repo](https://github.com/ant-design/babel-plugin-import) 。 ```bash -$ npm install antd babel-plugin-antd --save +$ npm install antd babel-plugin-import --save ``` -Edit `webpack.config.js` to integrate `babel-plugin-antd`. +Edit `webpack.config.js` to integrate `babel-plugin-import`. ```diff + webpackConfig.babel.plugins.push(['antd', { -+ style: 'css' ++ libraryName: 'antd', ++ style: 'css', + }]); ``` diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index fb2bd95b80..87567af5d5 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -49,17 +49,18 @@ webpack: bundle build is now finished. ## 使用 antd -通过 npm 安装 `antd` 和 `babel-plugin-antd` 。`babel-plugin-antd` 是用来自动引入 antd 的脚本和样式的,详见 [repo](https://github.com/ant-design/babel-plugin-antd) 。 +通过 npm 安装 `antd` 和 `babel-plugin-import` 。`babel-plugin-import` 是用来自动引入 antd 的脚本和样式的,详见 [repo](https://github.com/ant-design/babel-plugin-import) 。 ```bash -$ npm install antd babel-plugin-antd --save +$ npm install antd babel-plugin-import --save ``` -编辑 `webpack.config.js`,使 `babel-plugin-antd` 插件生效。 +编辑 `webpack.config.js`,使 `babel-plugin-import` 插件生效。 ```diff + webpackConfig.babel.plugins.push(['antd', { -+ style: 'css' ++ libraryName: 'antd', ++ style: 'css', + }]); ``` diff --git a/index.js b/index.js index 4898a3ab53..cd7a83566a 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,5 @@ /* eslint no-console:0 */ -// this file is not used if use https://github.com/ant-design/babel-plugin-antd +// this file is not used if use https://github.com/ant-design/babel-plugin-import function camelCase(name) { return name.charAt(0).toUpperCase() + @@ -29,6 +29,6 @@ req.keys().forEach((mod) => { if (process.env.NODE_ENV !== 'production') { if (typeof console !== 'undefined' && console.warn) { console.warn(`You are using prebuilt antd, -please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.`); +please use https://github.com/ant-design/babel-plugin-import to reduce app bundle size.`); } } diff --git a/package.json b/package.json index 6ec0749b27..220b1e083f 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "antd-tools": "^0.11.0", "babel-eslint": "^6.0.2", "babel-jest": "^13.2.2", - "babel-plugin-antd": "^0.4.0", + "babel-plugin-import": "^1.0.0", "babel-plugin-transform-runtime": "~6.15.0", "bisheng": "^0.12.0", "bisheng-plugin-antd": "~0.2.0", diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 457dd59a3a..ba71a7913f 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -80,11 +80,11 @@ module.exports = { ]); config.babel.plugins.push([ - require.resolve('babel-plugin-antd'), + require.resolve('babel-plugin-import'), { style: true, libraryName: 'antd', - libDir: 'components', + libraryDirectory: 'components', }, ]);