docs: remove babel-plugin-import (#10704)

2022-06-11 20:20:13 +08:00
parent a317984da1
commit 88d44cf4ea
5 changed files with 74 additions and 103 deletions
@@ -92,9 +92,9 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to

 ## Usage

-### Import on demand in vite projects (recommended)
+### Import on demand (recommended)

-If you are using vite, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
+If you are using vite, webpack or vue-cli, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).

 #### 1. Install Plugin

@@ -111,7 +111,7 @@ pnpm add unplugin-vue-components -D

 #### 2. Configure Plugin

-Configure the plugin in the `vite.config.js` file:
+For `vite` based project，configure the plugin in the `vite.config.js` file:

 ```js
 import vue from '@vitejs/plugin-vue';
@@ -128,6 +128,38 @@ export default {
 };
 ```

+For `vue-cli` based project，configure the plugin in the `vue.config.js` file:
+
+```js
+const { VantResolver } = require('unplugin-vue-components/resolvers');
+const ComponentsPlugin = require('unplugin-vue-components/webpack');
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      ComponentsPlugin({
+        resolvers: [VantResolver()],
+      }),
+    ],
+  },
+};
+```
+
+For `webpack` based project，configure the plugin in the `webpack.config.js` file:
+
+```js
+const { VantResolver } = require('unplugin-vue-components/resolvers');
+const ComponentsPlugin = require('unplugin-vue-components/webpack');
+
+module.exports = {
+  plugins: [
+    ComponentsPlugin({
+      resolvers: [VantResolver()],
+    }),
+  ],
+};
+```
+
 #### 3. Import Components

 Then you can import components from Vant:
@@ -140,51 +172,7 @@ const app = createApp();
 app.use(Button);
 ```

-> Vant supports Tree Shaking by default.
-
-### Import on demand in non-vite projects (recommended)
-
-In non-vite projects, use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand.
-
-#### 1. Install Plugin
-
-```bash
-npm i babel-plugin-import -D
-```
-
-#### 2. Configure Plugin
-
-Set babel config in `.babelrc` or `babel.config.js`:
-
-```json
-{
-  "plugins": [
-    [
-      "import",
-      {
-        "libraryName": "vant",
-        "libraryDirectory": "es",
-        "style": true
-      }
-    ]
-  ]
-}
-```
-
-#### 3. Import Components
-
-Then you can import components from Vant:
-
-```js
-// Input
-import { Button } from 'vant';
-
-// Output
-import Button from 'vant/es/button';
-import 'vant/es/button/style';
-```
-
-> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
+> Vant supports tree shaking by default, so you don't necessarily need the webpack plugin, if you can't accept the full import of css.

 ### Import all components (not recommended)

@@ -199,8 +187,6 @@ const app = createApp();
 app.use(Vant);
 ```

-> If you configured babel-plugin-import, you won't be allowed to import all components.
-
 ### Manually import (not recommended)

 ```js
@@ -93,9 +93,9 @@ pnpm add vant

 ## 引入组件

-### 在 vite 项目中按需引入组件（推荐）
+### 按需引入组件（推荐）

-在 vite 项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
+在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。

 #### 1. 安装插件

@@ -112,7 +112,7 @@ pnpm add unplugin-vue-components -D

 #### 2. 配置插件

-安装完成后，在 `vite.config.js` 文件中配置插件：
+如果是基于 `vite` 的项目，在 `vite.config.js` 文件中配置插件：

 ```js
 import vue from '@vitejs/plugin-vue';
@@ -129,6 +129,38 @@ export default {
 };
 ```

+如果是基于 `vue-cli` 的项目，在 `vue.config.js` 文件中配置插件：
+
+```js
+const { VantResolver } = require('unplugin-vue-components/resolvers');
+const ComponentsPlugin = require('unplugin-vue-components/webpack');
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      ComponentsPlugin({
+        resolvers: [VantResolver()],
+      }),
+    ],
+  },
+};
+```
+
+如果是基于 `webpack` 的项目，在 `webpack.config.js` 文件中配置插件：
+
+```js
+const { VantResolver } = require('unplugin-vue-components/resolvers');
+const ComponentsPlugin = require('unplugin-vue-components/webpack');
+
+module.exports = {
+  plugins: [
+    ComponentsPlugin({
+      resolvers: [VantResolver()],
+    }),
+  ],
+};
+```
+
 #### 3. 引入组件

 完成以上两步，就可以直接使用 Vant 组件了：
@@ -141,51 +173,7 @@ const app = createApp();
 app.use(Button);
 ```

-> Vant 默认支持通过 Tree Shaking 实现 script 的按需引入。
-
-### 在非 vite 项目中按需引入组件（推荐）
-
-在非 vite 的项目中，可以通过 babel 插件来实现按需引入组件。我们需要安装 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
-
-#### 1. 安装插件
-
-```bash
-npm i babel-plugin-import -D
-```
-
-#### 2. 配置插件
-
-在.babelrc 或 babel.config.js 中添加配置：
-
-```json
-{
-  "plugins": [
-    [
-      "import",
-      {
-        "libraryName": "vant",
-        "libraryDirectory": "es",
-        "style": true
-      }
-    ]
-  ]
-}
-```
-
-#### 3. 引入组件
-
-接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。
-
-```js
-// 原始代码
-import { Button } from 'vant';
-
-// 编译后代码
-import Button from 'vant/es/button';
-import 'vant/es/button/style';
-```
-
-> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
+> 注意：Vant 默认支持通过 Tree Shaking，因此你也可以不配置任何插件，直接通过 Tree Shaking 来移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。

 ### 导入所有组件（不推荐）

@@ -200,8 +188,6 @@ const app = createApp();
 app.use(Vant);
 ```

-> Tips: 配置按需引入插件后，将不允许直接导入所有组件。
-
 ### 手动按需引入组件（不推荐）

 在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。