创建基于npm的js类库，上传到npm

首先，本地安装好node.js。（这里是在windows下操作）

1.创建文件目录：

1.1 D:JsRepository

1.2 D:JsRepositorysrc （存放具体的类库文件）

1.2 D:JsRepository est （测试用例）

打开cmd ,进入到JsRepository文件夹， 执行 npm init

这时 JsRepository下会多了package.json文件

用vscode 打开

这个时候就可以开始js类库的编写了。

比如我这里封装一个http请求，我需要使用一些发起http请求的类库：umi-request(axios也可以)，测试使用jest

打开package.json文件可以看到对应的依赖

创建文件：

HttpUtils.js

import request from umi-request

export class HttpUtils {}


let getOptions = {
  method: "GET",
  headers: {
    "user-agent": "Mozilla/4.0 MDN Example",
    "content-type": "application/json"
  }
};

let postOptions = {
  method: "POST",
  headers: {
    "user-agent": "Mozilla/4.0 MDN Example",
    "Content-Type": "application/json;charset=UTF-8",
    accept: "application/json"
  }
};

HttpUtils.getList = async (url, params, fetchOptions) => {
  let options = getOptions;
  let fullUrl = url;
  let paramUrl;
  if (fetchOptions) {
    options = fetchOptions;
  }
  let pro = await request.get(fullUrl, { ...options, params }).then(res => {
    return res;
  });
  return pro;
};

HttpUtils.post = async function(url, data, fetchOptions) {
  let options = postOptions;
  if (fetchOptions) {
    options = fetchOptions;
  }
  return await request.post(url, { ...options, data }).then(res => {
    return res;
  });
};

http.test.js

import { Http } from ../src

describe(example, () => {
    test(getpage, async () => {
        const res = await Http.getList(https://api.apiopen.top/getJoke, {pageSize: 2})
        console.log(res)
    })
    test(add, async() => {
        // const res = await post(http://localhost:8080/tenant/add, {name: ln, age: 28})
        // console.log(res)
    })
})

添加测试依赖： yarn add --dev babel-jest @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs

根目录添加jest.json 配置文件，文件内容

{
    "verbose": false,
    "collectCoverage": true,
    "collectCoverageFrom": ["src/**"],
    "coverageReporters": ["json", "lcov", "text-summary", "html"]
  }

根目录下 添加 babel.config.js 文件 ， 内容：

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    node: "current"
                }
            }
        ]
    ],
    plugins: ["transform-es2015-modules-commonjs"]
};

运行测试用例，调试：

执行命令

npm test test/http.test.js

结果：

测试成功！

这里还有几个index.js 文件需要注意:

1.

2.

根目录执行： npm publish 上传到npm （这里需要有npm账号，自行注册,每次上传记得更改)

其他项目使用：

项目根目录：

1. 引入依赖： npm install

2. 在js文件中引入

import { HttpUtils } from jsrepository

console.log( await HttpUtils.getList(https://api.apiopen.top/getJoke))

该栗子类库可以在npm中搜索到