搭建ES6+Babel7.0+Mocha+chai+axios+mockjs 環(huán)境

為了學(xué)習(xí)js開發(fā)，搭建的開發(fā)環(huán)境水援。希望把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’

安裝：babel-plugin-module-resolver
配置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上
在項目根目錄下創(chuàng)建文件：.travis.yml

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

#設(shè)定ci要執(zhí)行的安裝命令池磁，實踐中發(fā)現(xiàn)奔害，如果沒有此節(jié)，
#則默認運行yarn install 或npm install 安裝package.json中的依賴地熄，
#如配置了此節(jié)华临，則必須要寫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

代碼覆蓋度

代碼覆蓋度的展現(xiàn)選用：[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)在導(dǎo)入你的項目后提供

為Github上添加badge

只為了逼格

github repo readme

添加CI的badge

在上進入自己的項目后

travis-ci-badge

獲得markdown格式的鏈接雅潭，放到github項目中的readme.md中

codecov圖標(biāo)

進入項目后，進入setting后却特，可找到badge

ESLint配置

安裝配置參考官網(wǎng)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的攔截原理應(yīng)該是改寫了XMLHttpRequest的相關(guān)操作椿浓，可能是實現(xiàn)了類似sinonjs的akeXMLHttpRequest，后選用axios和axios-mock-adapter
參考：

mockjs
axios-mock-adapter

最后編輯于：2019.03.24 14:04:31

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者