前言

这篇文章记录的是关于一些工具包的使用和注意事项

一、husky

这个东西的作用是方便的给 git 添加钩子

注意

  1. 这个东西只用 npm 安装才能正常使用，否则不能使用，cnpm 也不行
  2. 写法必须是这样写在 package.json 里,不要写在 package.json 的 scripts 里
1
2
3
4
5
  "husky": {
    "hooks": {
      "pre-commit": "echo 'husky'&&node ./test.js"
    }
},

不足

比如我添加了一个pre-commit钩子，就是在每次 commit 前进行指定操作，但是它这个操作是针对你的所有文件操作的，即使你没有改动的文件
比如：每次 commit 我想 eslint --fix 一下，那么这个操作会执行到所有文件上，包括你没改动的文件

补充

知道了不足肯定有解决办法，看下面的这个工具

二、lint-staged

作用

这个东西就是指明了上面钩子里的命令要作用于改动的文件

使用方法

也是在 package.json 里

1
2
3
4
5
6
7
8
9
10
11
12
13
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
},
"lint-staged": {
// 匹配文件类型，如果没匹配到就忽略，匹配到就执行里面的命令
	"*.js": [
	  "echo 'js文件过'",
	  "node ./test.js",
	  "git add"
	]
},

三、mocker-api

这个是以 restful api 风格模拟假数据的，同样也有些要注意的地方

  1. 如果不和 webpack 配合使用，那命令行执行就可以,会启动一个服务 直接访问即可

  2. 与 webpack 配合，要使用 apiMocker，apiMocker 有三个参数

    apiMocker(app,path,option)

    1. app:devserver服务器实例（express实例）
2. mocker配置文件路径（一定要有后缀）
3. 这个参数一定要注意，如果在mocker/index.js(就是mocker的配置文件)利配置过了_proxy:{}这个参数，那这个option是没用的

  3. 配置项的一些说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
_proxy: {
   // 代理
   proxy: {
     // 代理规则，目标服务器配置
     '/api/(.*)': 'https://api.github.com/'
   },
   //  重写路径，前端请求的是这个^/api/repos/，实际发送的是这个'/repos/'
   pathRewrite: {
     '^/api/repos/': '/repos/',
   },
   // 是否设置请求头的host,true表示在请求头里会带有host信息，false不带
   // 有的代理服务器设置了请求域名白名单（某些域名才能访问）就要设置这个
   changeHost: true,
   // mocker-api其实是在http-proxy基础上封装的，这个配置项就是http-proxy的配置项
   // http proxy配置项
   httpProxy: {
     options: {
       // 转发到目的路径是否带上path
       // 在上面proxy配置了 '/api/(.*)'的前提下
       // 比如 true 请求地址：localhost/api/user,那转发到代理服务器的请求是 1.1.1.1，没有path
       // false 就是1.1.1.1/api/user
       ignorePath: true,
     },
     // 监听事件
     listeners: {
       // 在每次请求转发前拦截，可以进行改动，比如设置一个请求头
       // proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
       proxyReq: function (proxyReq, req, res, options) {
         console.log('proxyReq',req);
       },
     },
   }
 },

webpack 配置 demo

webpack.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const APIMocker = require('mocker-api');
const os = require('os');

module.exports = env =>
  merge(common, {
    mode: 'development',
    output: {
      publicPath: ''
    },
    devtool: '#eval-source-map',
    devServer: {
      // host: getNetworkIp(),
      host: '0.0.0.0',
      disableHostCheck: true,
      contentBase: path.join(__dirname, '/src/'),
      before(app) {
        APIMocker(app, path.resolve('./mocker/mock.js'));
      },
      proxy: {
        '/handwrite': {
          target: 'http://xxxxx.com', // target host
          changeOrigin: true, // needed for virtual hosted sites
          ws: true, // proxy websockets
          pathRewrite: {
            // '^/payui': '/payui'
          }
mock.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const glob = require('glob');
const path = require('path');
let proxy = {};
const files = glob.sync('src/pages/*?/test_data.js');
files.forEach((file) => {
  let paths = file.split('/');
  let sub = paths.pop();
  let namespace = paths.pop();
  let filepath = path.join(__dirname, '../', file);
  let data = require(filepath);
  let n_data = {};
  let isNameSpace = data.namespace;
  // 如果设定命名空间
  for (let key in data) {
    let addX = /^\//g.test(key);
    let endKey = '';
    if (key == 'namespace') continue;
    if (isNameSpace) {
      endKey = `/test/${namespace}${addX ? '' : '/'}${key}`;
    } else {
      endKey = `/test${addX ? '' : '/'}${key}`;
    }
    n_data[endKey] = data[key];
  }
  proxy = Object.assign(proxy, n_data);
  console.log(proxy);
});
module.exports = proxy;
test_data.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let api = require('../../api/api');

module.exports = {
  // namespace: true,
  [api.demo.getUser]: {
    id: 1,
    username: 'kenny',
    sex: 6
  },
  [api.demo.updataUser]: (req, res) => {
    const { password, username } = req.body;
    if (password === '888888' && username === 'admin') {
      return res.json({
        status: 'ok',
        code: 0,
        token: 'sdfsdfsdfdsf',
        data: {
          id: 1,
          username: 'kenny',
          sex: 6
        }
      });
    } else {
      return res.status(403).json({
        status: 'error',
        code: 403
      });
    }
  }
};