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

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

1.创建文件目录：

1.1 D:JsRepository   

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

1.2 D:JsRepositorytest   （测试用例）

打开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 jsrepository

2. 在js文件中引入     

 import { HttpUtils } from 'jsrepository'

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

该栗子类库可以在npm中搜索到  https://www.npmjs.com

最后

以上就是拼搏芒果最近收集整理的关于创建基于npm的js类库，上传到npm的全部内容，更多相关创建基于npm内容请搜索靠谱客的其他文章。