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

packages/create-vant-cli-app/generators/vue2/package.json.tpl

@@ -34,7 +34,6 @@
   },
   "devDependencies": {
     "@vant/cli": "^2.0.0",
-    "babel-plugin-import": "^1.13.0",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },

packages/vant-cli/docs/directory.md

@@ -42,7 +42,7 @@ button
 └─ README.md        # component doc
 ```
 
-When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively, and the styles can also be imported automatically through babel-plugin-import.
+When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively.
 
 Theme customization can be achieved by importing style source files (less or scss) and modifying style variables.
 

packages/vant-cli/docs/directory.zh-CN.md

@@ -42,7 +42,7 @@ button
 └─ README.md        # 组件文档
 ```
 
-采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。
+采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。
 
 通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
 

packages/vant/docs/markdown/quickstart.en-US.md

@@ -92,36 +92,69 @@ 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 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
+If you are using vite, webpack or vue-cli, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
 
 #### 1. Install Plugin
 
 ```bash
 # with npm
-npm i vite-plugin-style-import@1.4.1 -D
+npm i unplugin-vue-components -D
 
 # with yarn
-yarn add vite-plugin-style-import@1.4.1 -D
+yarn add unplugin-vue-components -D
 
 # with pnpm
-pnpm add vite-plugin-style-import@1.4.1 -D
+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';
-import styleImport, { VantResolve } from 'vite-plugin-style-import';
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
 
 export default {
   plugins: [
     vue(),
-    styleImport({
-      resolves: [VantResolve()],
+    Components({
+      resolvers: [VantResolver()],
+    }),
+  ],
+};
+```
+
+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()],
     }),
   ],
 };
@@ -139,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)
 
@@ -198,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

packages/vant/docs/markdown/quickstart.zh-CN.md

@@ -93,36 +93,69 @@ pnpm add vant
 
 ## 引入组件
 
-### 在 vite 项目中按需引入组件（推荐）
+### 按需引入组件（推荐）
 
-在 vite 项目中使用 Vant 时，推荐安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 插件，它可以自动按需引入组件的样式。
+在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
 
 #### 1. 安装插件
 
 ```bash
 # 通过 npm 安装
-npm i vite-plugin-style-import@1.4.1 -D
+npm i unplugin-vue-components -D
 
 # 通过 yarn 安装
-yarn add vite-plugin-style-import@1.4.1 -D
+yarn add unplugin-vue-components -D
 
 # 通过 pnpm 安装
-pnpm add vite-plugin-style-import@1.4.1 -D
+pnpm add unplugin-vue-components -D
 ```
 
 #### 2. 配置插件
 
-安装完成后，在 `vite.config.js` 文件中配置插件：
+如果是基于 `vite` 的项目，在 `vite.config.js` 文件中配置插件：
 
 ```js
 import vue from '@vitejs/plugin-vue';
-import styleImport, { VantResolve } from 'vite-plugin-style-import';
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
 
 export default {
   plugins: [
     vue(),
-    styleImport({
-      resolves: [VantResolve()],
+    Components({
+      resolvers: [VantResolver()],
+    }),
+  ],
+};
+```
+
+如果是基于 `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()],
     }),
   ],
 };
@@ -140,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 无法通过这种方式优化。
 
 ### 导入所有组件（不推荐）
 
@@ -199,8 +188,6 @@ const app = createApp();
 app.use(Vant);
 ```
 
-> Tips: 配置按需引入插件后，将不允许直接导入所有组件。
-
 ### 手动按需引入组件（不推荐）
 
 在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。

packages/vant/docs/markdown/theme.en-US.md

@@ -174,42 +174,3 @@ module.exports = {
   },
 };
 ```
-
-### Vite
-
-Add the following config in `vite.config.js`.
-
-```js
-// vite.config.js
-import vue from '@vitejs/plugin-vue';
-import styleImport from 'vite-plugin-style-import';
-
-export default {
-  css: {
-    preprocessorOptions: {
-      less: {
-        javascriptEnabled: true,
-        modifyVars: {
-          'text-color': '#111',
-          'border-color': '#eee',
-        },
-      },
-    },
-  },
-  resolve: {
-    alias: [{ find: /^~/, replacement: '' }],
-  },
-  plugins: [
-    vue(),
-    styleImport({
-      libs: [
-        {
-          libraryName: 'vant',
-          esModule: true,
-          resolveStyle: (name) => `vant/es/${name}/style/less`,
-        },
-      ],
-    }),
-  ],
-};
-```

packages/vant/docs/markdown/theme.zh-CN.md

@@ -182,44 +182,3 @@ module.exports = {
   },
 };
 ```
-
-### Vite 项目
-
-如果是 vite 项目，可以跳过以上步骤，直接在 `vite.config.js` 中添加如下配置即可。
-
-```js
-// vite.config.js
-import vue from '@vitejs/plugin-vue';
-import styleImport from 'vite-plugin-style-import';
-
-export default {
-  css: {
-    preprocessorOptions: {
-      less: {
-        javascriptEnabled: true,
-        // 覆盖样式变量
-        modifyVars: {
-          'text-color': '#111',
-          'border-color': '#eee',
-        },
-      },
-    },
-  },
-  resolve: {
-    alias: [{ find: /^~/, replacement: '' }],
-  },
-  plugins: [
-    vue(),
-    // 按需引入样式源文件
-    styleImport({
-      libs: [
-        {
-          libraryName: 'vant',
-          esModule: true,
-          resolveStyle: (name) => `vant/es/${name}/style/less`,
-        },
-      ],
-    }),
-  ],
-};
-```