简介
babel-plugin-proxy 是一个 babel 插件，它可以拦截代码中的函数调用，并对其进行代理处理。在前端应用场景中，该插件可以用于实现接口的 mock 数据，方便前端开发和调试。
安装
首先需要安装 babel 和 babel-cli 工具：
npm install --save-dev babel-cli babel-core
然后再安装 babel-plugin-proxy：
npm install --save-dev babel-plugin-proxy
使用
配置 webpack
在 webpack.config.js 中配置 babel-loader，将 babel-plugin-proxy 声明为插件：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------
-------- ---------- -
--------------- -----------
---
-
-
-
-
-
-编写 mock.js
在项目根目录下新建 mock.js 文件，编写如下代码：
-- -------------------- ---- -------
-------------- - -
-- --------- ---- --
----- ----------- ----- ---- -- -
----- - -------- - - --------
-- --------- --- -------- -
----------
-------- -----
----- -
--- --
--------- --------
----- -------
-
--
- ---- -
----------
-------- ------
-------- ----------
--
-
-
-编写业务代码
在项目代码中，假设有一个 login 方法，用于调用登录接口：
export function login(username, password) {
return axios.post('/api/login', {
username,
password
}).then(res => res.data)
}通过 babel-plugin-proxy，我们可以将接口请求拦截，并返回 mock 数据：
export function login(username, password) {
return axios.post('/api/login', {
username,
password
}).then(res => res.data) // 直接返回 mock 数据
}结语
使用 babel-plugin-proxy 并不需要开发者手写 mock 数据，通过使用该插件和 mock.js 配合，我们可以轻松实现接口的 mock，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66013