Gathering detailed insights and metrics for webpack-plugin-mock
Installations
npm install webpack-plugin-mockDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
14.18.1
NPM Version
8.0.0
Score
52.7
Supply Chain
89.3
Quality
68.8
Maintenance
50
Vulnerability
97.6
License
Releases
Unable to fetch releases
Contributors
1
Download Statistics
Total Downloads
1,436
Last Day
1
Last Week
7
Last Month
40
Last Year
350
Bundle Size
815.57 kB
Minified
314.32 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.1
Package Id
webpack-plugin-mock@1.1.1
Unpacked Size
39.41 kB
Size
11.63 kB
File Count
19
NPM Version
8.0.0
Node Version
14.18.1
Publised On
15 May 2023
Total Downloads
Cumulative downloads
Total Downloads
1,436
Last day
0%
1
Compared to previous day
Last week
-22.2%
7
Compared to previous week
Last month
73.9%
40
Compared to previous month
Last year
-42.7%
350
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
22
Dev Dependencies
26
@types/klaw@types/koa-json@types/koa-logger@types/koa-safe-jsonp@types/koa-send@types/koa-static@types/koa__cors@types/koa__multer@types/koa__router@types/lodash@types/mockjs@types/node@typescript-eslint/eslint-plugin@typescript-eslint/parsereslinteslint-config-prettiereslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hooksavabumppcross-envhuskylint-stagedprettiertypescript
Versions
webpack-plugin-mock
一款mockjs的webpack插件，配置简单、易用; Mock 编写灵活...如果对你有帮助，给个star
安装
1# npm 2npm install webpack-plugin-mock -D 3 4# yarn 5yarn add webpack-plugin-mock -D
使用
需要在当前目录下有 mock 文件夹
1├── mock 2| ├── books/ 3| | ├── books/ 4| | | └── queryBooksByPage 5| | | | └── data.json 6| ├── example/ 7| | ├── json.js 8| | └── x-www-from-urlencoded.js 9| └── user/ 10| └── list.json 11└── package.json
webpack 配置
1 new WebpackPluginMock({ 2 apiBasePath: './mock', 3 watch: true, 4 pretty: true, 5 port: 8090 6 }) 7 8 port Mock 服务的启动端口 9 config Mock 服务的启动配置 10 apiBasePath Mock 服务 API 目录 11 pretty 是否对 JSON Response 美化 12 watch 是否监控 API 目录文件变化
Mock 编写
用法一：定义 JSON（默认支持 mockjs 语法）
1{ 2 "code": 0, 3 "msg": "", 4 "data": { 5 "dataList|10" :[ 6 { 7 "id": "@id", 8 "name": "@cname", 9 "phone": "@pick([13913998972, 19941558406])", 10 "deptName": "前端开发部" 11 } 12 ], 13 "totalCount": 20, 14 "totalPageCount": 2 15 } 16}
文件路径：xxx/apis/demo/qux.json，会自动创建路由为 /demo/qux 的接口，支持 GET/POST/JSONP 等方法。
兼容旧版 mock 服务，如果 JSON 文件路径为 xxx/apis/demo/foo/data.json，则创建的路由为 /demo/foo。
用法二：定义 CommonJS 模块（默认支持 mockjs 语法），要求模块默认导出的方法调用后返回对象
1module.exports = () => ({ 2 foo: 'bar', 3 list: [1, 2, 3, 4, 5] 4});
文件路径：xxx/apis/demo/foo.js，会自动创建路由为 /demo/foo 的接口，支持 GET/POST/JSONP 等方法。
用法三：定义 Koa 中间件，要求模块默认导出的方法调用后返回的对象中包含 middleware 函数
1module.exports = ({ mock }) => ({ 2 async middleware(ctx, next) { 3 ctx.body = { 4 foo: 'bar', 5 list: [1, 2, 3, 4, 5] 6 }; 7 } 8});
文件路径：xxx/apis/demo/foo.js，会自动创建路由为 /demo/foo 的接口，支持 GET/POST 等方法。
用法四：定义 Koa 中间件、请求方法和路径（忽略文件路径），允许同时定义多个
1module.exports = ({ mock }) => ({ 2 method: 'get', 3 path: '/demo/bar', 4 async middleware(ctx, next) { 5 ctx.body = { 6 foo: 'bar', 7 list: [1, 2, 3, 4, 5] 8 }; 9 } 10});
创建仅支持 GET 方法，路由为 /demo/bar 的接口。
1module.exports = ({ mock }) => ([ 2 { 3 method: 'get', 4 path: '/example/multiple/foo', 5 async middleware(ctx, next) { 6 ctx.body = { 7 foo: 'foo', 8 list: [1, 2, 3, 4, 5] 9 }; 10 } 11 }, 12 { 13 method: 'get', 14 path: '/example/multiple/bar', 15 async middleware(ctx, next) { 16 ctx.body = { 17 foo: 'bar', 18 list: [1, 2, 3, 4, 5] 19 }; 20 } 21 }, 22 { 23 method: 'get', 24 path: '/example/multiple/jsonp', 25 async middleware(ctx, next) { 26 ctx.jsonp = { 27 foo: 'bar', 28 list: [1, 2, 3, 4, 5] 29 }; 30 } 31 } 32]);
在一个模块中同时定义多个接口路由（每个子路由都必须定义 path）。
用法五：完全自定义 Koa 路由（不能返回对象，否则和用法二冲突）
1module.exports = ({ router, mock }) => { 2 router.get('/demo/baz', (ctx, next) => { 3 ctx.body = 'Hello World!'; 4 }); 5};
No vulnerabilities found.
No security vulnerabilities found.