搭建ES6+Babel7.0+Mocha+chai+axios+mockjs 环境

为了学习js开发，搭建的开发环境。希望把Babel、测试框架、ajax库、mock、eslint集成到一起。DemoOnGIthub

babel

package.json

"scripts": {
    "ex": "babel-node  --presets=@babel/preset-env "
  },

  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "cross-env": "^5.2.0"
  },

  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/register": "^7.0.0",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.4"
  }

babel.config.js

在项目根目录下建立此文件

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
        node: "current"
      },
      useBuiltIns: "usage"
    }
  ]
];
module.exports = { presets };

mocha+chai

安装：

// package.json文件片段
"devDependencies": {    
    "chai": "^4.2.0",
    "mocha": "^6.0.2"
  }

mocha配置

"use strict";
//放在项目根目录下 文件名为 ".mocharc.js"
// Here's a JavaScript-based config file.
// If you need conditional logic, you might want to use this type of config.
// Otherwise, JSON or YAML is recommended.
module.exports = {
  diff: true,
  extension: ["js"],
  // opts: './test/mocha.opts',
  // package: './package.json',
  reporter: "spec",
  slow: 75,
  timeout: 2000,
  ui: "bdd",
  recursive: [
    "./test/**/*.spec.js"
  ],
  require: ["@babel/polyfill", "@babel/register"]

};

文件路径别名解析

为简化代码中import语句引入包路径的简化。如‘../../src’ 简化为‘S/src’

1. 安装：babel-plugin-module-resolver
2. 配置babel

const plugins = [
    [
      "module-resolver",
      {
        root: ["./"],
        alias: {
 
          "S": "./src",   //用S代替src路径，形如：'../src/xxx'可简化为'S/xxx'
          "T": "./test"
        }
      }
    ]
  ];
//...其他配置
module.exports = { /*其他配置**/,plugins };

CI 和代码覆盖率度量的配置

CI配置

选择travis-ci，前提是项目必须在github上
在项目根目录下创建文件：.travis.yml

language: node_js
#指定nodejs版本，可以指定多个
node_js:
- v10.15.3
#为codecov添加
env:
  global:
  - CODECOV_TOKEN: "your uuid token"

#设定ci要执行的安装命令，实践中发现，如果没有此节，
#则默认运行yarn install 或npm install 安装package.json中的依赖，
#如配置了此节，则必须要写yarn install
install:
- yarn install
- npm install -g codecov
- npm install -g istanbul

#运行的脚本命令
script:
- yarn run lint
- istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && codecov
#指定分支，只有指定的分支提交时才会运行脚本
branches:
  only:
  - master

代码覆盖度

代码覆盖度的展现选用：[codecov]（https://codecov.io)，前提是项目必须在github上

在.travis.yml文件中添加：

#other configs
env:
  global:
  - CODECOV_TOKEN: "your uuid token"

install:
# other install command
- npm install -g codecov
- npm install -g istanbul

script:
# other scripts
- istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && codecov

其中- CODECOV_TOKEN: "your uuid token"由[codecov]（https://codecov.io)在导入你的项目后提供

为Github上添加badge

只为了逼格

github repo readme

添加CI的badge

在上进入自己的项目后

travis-ci-badge

获得markdown格式的链接，放到github项目中的readme.md中

codecov图标

进入项目后，进入setting后，可找到badge

ESLint配置

安装配置参考官网Getting Started with ESLint
有一小坑：前面配置了路径别名，eslint代码时会报路径解析的错误，所以要为eslint也配上路名别名的识别：
npm install --save-dev eslint-import-resolver-babel-module
.eslintrc.js配置：

module.exports = {
 #other configs
  settings: {//beging setting
    "import/resolver": {
      "babel-module": {
        root: ["./"],
        alias: {
          "S": "./src",
          "T": "./test"
        }
      }
    }
  }//end setting
};

axios + mock

开始用request-promise 时mockjs不起作用，后猜测mockjs的拦截原理应该是改写了XMLHttpRequest的相关操作，可能是实现了类似sinonjs的akeXMLHttpRequest，后选用axios和axios-mock-adapter
参考：

• mockjs
• axios-mock-adapter