首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

利用webpack搭建mock API服务

2018年11月05日 发布 阅读(677) 作者:懒炖

利用webpack实现mock api,需要用到插件webpack-api-mocker

项目目录结构

安装

  1. npm install webpack-api-mocker --save-dev

build/webpack.dev.conf.js中引入webpack-api-mocker

  1. const apiMocker = require('webpack-api-mocker');

devServer参数中设置before,我们把api接口定义在mock目录下的proxy

  1. ...
  2. devServer: {
  3. // 内容路径
  4. contentBase: path.join(__dirname, "../src"),
  5. // gzip压缩
  6. compress: true,
  7. // 端口
  8. port: 9000,
  9. historyApiFallback: true,// 如果为 true ,页面出错不会弹出 404 页面
  10. // api mocker
  11. before(app) {
  12. apiMocker(app, path.resolve(__dirname, "../mock/proxy"))
  13. }
  14. },
  15. ...

注意: apiMocker第二个参数,必须是字符串路径,即上面path.resolve(__dirname, "../mock/proxy")这一串

附: proxy代码,我们可以把不同的API通过文件拆开来

利用_proxy参数,可以代理相关的请求接口。如我们本地开发,但数据需要真实环境的数据,这个真实环境可能是测试服务器,可能是后台开发自己的电脑,这对真实场景的调试是非常有用的

貌似_proxy的代理优先级不生效,所以这里通过环境变量process.env.proxy设置不同的proxy配置

mock/proxy.js

  1. const USER = require("./user");
  2. const _proxy = process.env.proxy == "true";
  3. console.log(_proxy);
  4. let proxy = {};
  5. if (_proxy) {
  6. proxy = {
  7. /**
  8. * 代理远程服务器联调
  9. */
  10. _proxy: {
  11. proxy: {
  12. // "/repos/*": "https://api.github.com/",
  13. // "/:owner/:repo/raw/:ref/*": "http://127.0.0.1:2018"
  14. "/weixin/*": "http://172.20.21.21:8086/"
  15. },
  16. changeHost: true
  17. }
  18. };
  19. } else {
  20. proxy = {
  21. /**
  22. * 用户相关api
  23. */
  24. ...USER
  25. };
  26. }
  27. module.exports = proxy;

mock/user.js

  1. const USER = {
  2. 'GET /weixin/user': { id: 1, username: 'kenny', sex: 6 }
  3. }
  4. module.exports = USER;

修改package.json,定义dev,proxy

本地开发,启用npm run dev
需要测试真实数据时,启用npm run proxy

  1. "scripts": {
  2. "dev": "cross-env proxy=false webpack-dev-server --hot --color --config build/webpack.dev.conf.js",
  3. "proxy": "cross-env proxy=true webpack-dev-server --hot --color --config build/webpack.dev.conf.js",
  4. "build": "webpack --config build/webpack.prod.conf.js",
  5. "server": "http-server ./dist -a 127.0.0.1 -p 9000 --proxy http://172.88.88.21:8086/"
  6. },

执行npm run dev把项目跑起来,测试下api是否成功

测试成功如下图

参考:

webpack devServer/before : https://webpack.docschina.org/configuration/dev-server/#devserver-before

webpack-api-mocker: https://www.npmjs.com/package/webpack-api-mocker

找一个mock缩略图发现一组很有意思的图片:


版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • IntersectionObserver API

    在之前,我们要判断一个元素是否出现在视窗内,需要使用`scroll`或`setInterval`来不断计算元素的位置,这样非常损耗性能,Chrome在2016年的时候推出了IntersectionObserver APi,现在看看它是做什么的

    发布:2019-03-12 阅读(347)

  • react服务器端渲染之--nextjs

    Next.js 是一个轻量级的 React 服务端渲染应用框架。

    发布:2019-01-24

  • webpack-dev-server设置局域网IP可访问

    默认情况下,webpack-dev-server只可使用localhost或127.0.0.1访问,用局域网IP访问不了

    发布:2018-11-15 阅读(468)

  • webpack复制静态文件

    mvvm项目总会有一些静态文件,如静态合同、协议等等,如何通过webpack来原样复制?

    发布:2018-11-09 阅读(595)

  • http-server搭建静态服务器

    利用http-server搭建静态服务器,即浏览html文件用的~

    发布:2018-11-09 阅读(407)

  • webpack最小化打包lodash插件

    webpack最小化打包lodash插件,如果全量打包的话,lodash会非常大

    发布:2018-11-09 阅读(461)

  • webpack中文文档

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle

    发布:2018-10-18 来源:docschina.org

  • linux云服务通过Nginx绑定多个域名

    通过Nginx反向代理,在一个云服务器上绑定多个域名,不同的域名访问不同的目录,端口

    发布:2018-10-11 阅读(364)

  • webpack 1.x升级到webpack4.x过程中的各种问题解决

    发布:2018-04-16 阅读(879)

  • HTML5 对history新增的API:pushState,replaceState,state,popstate

    基于MVC设计模式和ajax技术实现单页面结构时,如果实现前进后退功能呢?这在以前我们可以采用hash方法,但终究不是很完美,我们在访问facebook或google的一些页面时会发现,页面不仅实现了局部刷新,而且页面URL也发生了变化。这就是HTML5对history的贡献.

    发布:2014-04-22 阅读(495)