npm发布js工具包

一、创建项目

  • 1、在github上创建一个项目，然后拉取至本地，进入项目目录
  • 2、执行 npm init 生成json文件
  • 3、创建 src/index.ts 入口文件和 src/isObject.ts 工具方法
· src/index.ts
export { default as isObject } from './isObject'
· src/isObject.ts
/*** @description 判断是否为对象* @param {*} variable* @returns {Boolean}*/
function isObject(variable: any): boolean {return Object.prototype.toString.call(variable) === '[object Object]'
}export default isObject

二、配置Rollup打包

  • 1、安装rollup和typescript npm install rollup typescript -D
  • 2、创建 tsconfig.json 配置文件：
{"compilerOptions": {"target": "es5" /* 编译目标 */,"module": "commonjs" /* 项目模块类型 */,"lib": ["ES2018", "DOM"],"allowJs": true /* 是否允许js代码 */,"checkJs": true /* 检查js代码错误 */,"declaration": true /* 自动创建声明文件(.d.ts) */,"declarationDir": "./lib/types" /* 声明文件目录 */,"sourceMap": true /* 自动生成sourcemap文件 */,"outDir": "lib" /* 编译输出目录 */,"rootDir": "./src" /* 项目源码根目录，用来控制编译输出的目录结构 */,"strict": true /* 启用严格模式 */},"include": ["src/*.ts"],"exclude": ["node_modules", "lib"],
}
  • 3、安装rollup插件
    · 处理路径 npm install @rollup/plugin-node-resolve -D
    · 支持ts npm install @rollup/plugin-typescript -D
    · 处理commonjs npm install @rollup/plugin-commonjs -D
    · 压缩umd规范的输出文件 npm install @rollup/plugin-terser -D
    · 重新打包代码清理 npm install rollup-plugin-delete -D
  • 4、创建 rollup.config.js 配置文件：
const resolve = require('@rollup/plugin-node-resolve') // 处理npm包的相关引入依赖
const typescript = require('@rollup/plugin-typescript')
const commonjs = require('@rollup/plugin-commonjs') // 将commonJS的语法转化成ES2015 Module
const terser = require('@rollup/plugin-terser') // 代码压缩
const del = require('rollup-plugin-delete')module.exports = [{input: './src/index.ts',output: [{dir: 'lib',format: 'cjs',entryFileNames: '[name].cjs.js',sourcemap: true, // 是否输出sourcemap},{dir: 'lib',format: 'esm',entryFileNames: '[name].esm.js',sourcemap: true, // 是否输出sourcemap},{dir: 'lib',format: 'umd',entryFileNames: '[name].umd.js',name: 'Umob', // umd模块名称，自动挂载至windowsourcemap: true,plugins: [terser()],},],plugins: [del({ targets: 'lib/*' }),resolve(),commonjs(),typescript({ module: 'ESNext' }),],},
]
  • 5、在package.json配置的scripts中增加构建脚本 "build": "rollup -c"
  • 6、执行 npm run build

三、手动发布

  • 1、完善配置文件
· .npmignore
src/
node_modules/
.babelrc
.gitignore
· package.json
{"name": "your project name","version": "0.0.1","description": "your project description","browser": "lib/index.esm.js", // umd规范"module": "lib/index.esm.js", // 使用esm时，会使用这个包"jsnext:main": "lib/index.esm.js",  // 社区规范"main": "lib/index.cjs.js", // 当使用commonjs规范时会使用这个包"types": "lib/types/index.d.ts", // ts类型文件"files": ["lib"], // 用于约定在发包的时候NPM 会发布包含的文件和文件夹。"scripts": {"build": "rollup -c",},"keywords": ["modules","stdlib","util"],"author": "Unknow","license": "MIT","devDependencies": {"@rollup/plugin-commonjs": "^25.0.0","@rollup/plugin-node-resolve": "^15.1.0","@rollup/plugin-terser": "^0.4.3","@rollup/plugin-typescript": "^11.1.1","rollup": "^3.23.0","rollup-plugin-delete": "^2.0.0","tslib": "^2.5.2","typescript": "~5.0.4"},"repository": {"type": "git","url": "https://github.com/xxx.git"}
}
  • 2、登陆npm账号(没有去官网注册一个) npm login
  • 3、查看是否登录成功 npm who am i
  • 4、将包推送至服务器 npm publish
  • 5、package中的name不可与他人重复，否则会提示权限问题。如果使用@[scope]/package的命名形式，[scope]需要填账户名称

四、安装jest单元测试

  • 1、安装 install jest ts-jest @types/jest jest-environment-jsdom -D
  • 2、根目录下新增配置文件:
· .jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */module.exports = {preset: 'ts-jest',testEnvironment: 'jsdom', clearMocks: true,collectCoverage: true,coverageDirectory: 'coverage',coverageProvider: 'v8',moduleFileExtensions: ["ts", "js"],// 配置测试环境uatestEnvironmentOptions: {userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',},
}

3、在 package.json 配置的scripts中增加测试脚本 "test": "jest"
4、编写单元测试：

· src/tests/isObject.test.ts
import { isObject } from '../index'describe('isObject: ', () => {it('Determine the type of number', async () => {expect(isObject(1)).toEqual(false)})it('Determine the type of string', async () => {expect(isObject('1')).toEqual(false)})it('Determine the type of boolean', async () => {expect(isObject(false)).toEqual(false)})it('Determine the type of array', async () => {expect(isObject([])).toEqual(false)})it('Determine the type of undefined', async () => {expect(isObject(undefined)).toEqual(false)})it('Determine the type of null', async () => {expect(isObject(null)).toEqual(false)})it('Determine the type of symbol', async () => {const symbol2 = Symbol('this is symbol')expect(isObject(symbol2)).toEqual(false)})it('Determine the type of empty object', async () => {expect(isObject({})).toEqual(true)})
})
  • 5、增加单文件单元测试命令，用于团队本地开发测试使用 "test:single": "node env-dependencies.js"
  • 6、在根目录下创建 env-dependencies.js 和 .env.json 文件
· env-dependencies.js
const execSync = require('child_process').execSync
const pkg = require('./package.json')
const fs = require('fs')
const path = require('path')
const JSON_FILE_NAME = '.env.json'
const DEFAULT_TEST_FILE_NAME = 'isObject'
const filePath = path.join(__dirname, JSON_FILE_NAME) // 文件路径// 检查文件是否已存在
if (!fs.existsSync(filePath)) {const content = {TEST_FILE_NAME: DEFAULT_TEST_FILE_NAME,}const jsonContent = JSON.stringify(content, null, 4)try {fs.writeFileSync(filePath, jsonContent, 'utf8')} catch (err) {console.error('写入文件时发生错误：', err)}
}if (!pkg.envDependencies) {process.exit(0)
}let env = Object.assign({}, process.env)try {Object.assign(env, require('./' + JSON_FILE_NAME))
} catch (err) {console.log('Could not read or parse JSON_FILE_NAME.')
}if (typeof pkg.envDependencies.params === 'undefined') {console.log('pkg.envDependencies.params not found or empty. Passing.')process.exit(0)
}if (!Array.isArray(pkg.envDependencies.params) ||!(pkg.envDependencies.params.every(item => typeof item === 'string'))
) {throw new Error('pkg.envDependencies.params should have a signature of String[]')
}const parsed = pkg.envDependencies.params.map(item => item.replace(/${([0-9a-zA-Z_]*)}/g, (_, varName) => {if (typeof env[varName] === 'string') {return env[varName]} else {throw new Error('Could not read env variable ' + varName + ' in params ' + item)}
})).join(' ')try {execSync(parsed, { stdio: [0, 1, 2] })process.exit(0)
} catch (err) {}
· .env.json
{"TEST_FILE_NAME": "isObject"
}
· 在package.json中增加字段
"envDependencies": {"params": ["jest ./src/__tests__/${TEST_FILE_NAME}.test.ts --coverage --collectCoverageFrom=./src/${TEST_FILE_NAME}.ts"]
}
  • 7、配置 .gitignore 和 .npmignore，忽略 .env.json 的提交
  • 8、运行 npm run test:single，可测试 .env.json 中 TEST_FILE_NAME 字段配置的文件名

五、安装eslint

  • 1、安装 install eslint eslint-config-airbnb @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
  • 2、新增配置文件:
· .eslintrc.js
module.exports = {root: true,env: {browser: true,node: true,},extends: ['airbnb','plugin:@typescript-eslint/recommended',],parser: '@typescript-eslint/parser',plugins: ['@typescript-eslint',],globals: {NodeJS: 'readonly',},settings: {'import/resolver': {node: {extensions: ['.js', '.ts']},},react: {version: '0.0.0',},},rules: {// 添加自定义规则'no-console': 2,'no-debugger': 2,},
}
  • 3、增加lint命令 "lint": "eslint --ext .ts src/"
  • 4、运行 npm run lint
  • 5、安装husky，在代码提交前自动执行eslint校验 npm install husky --save-dev
  • 6、启用git钩子 npx husky install
  • 7、向package.json文件设置prepare脚本 npm pkg set scripts.prepare="husky install"
  • 8、新增一个pre-commit钩子 npx husky add .husky/pre-commit "npm run lint"

六、自动化发布

  • 1、在npm中生成 Access Tokens
    在这里插入图片描述

  • 2、将token复制到github对应仓库的秘钥中
    在这里插入图片描述

  • 3、设置一个变量名 NPM_ACCESS_TOKEN，用于之后CI中通过 secrets.NPM_ACCESS_TOKEN 获取

  • 4、在根目录下创建 .github/workflows/node.js.yml 配置文件

name: Build CIon:push:branches: [ "main" ]jobs:build:runs-on: ubuntu-latestpermissions:contents: writestrategy:matrix:node-version: [16.20.0]steps:- name: 检出分支uses: actions/checkout@v3- name: 初始化缓存uses: actions/cache@v3id: cache-dependencieswith:path: node_moduleskey: ${{runner.OS}}-${{hashFiles(\'**/package-lock.json\')}}- name: Use Node.js ${{ matrix.node-version }}# 使用actions/setup-node插件uses: actions/setup-node@v3with:# node版本node-version: ${{ matrix.node-version }}cache: 'npm'- run: npm ci# 生成测试覆盖率- run: npm run test- run: npm run build- name: 上报测试覆盖率id: coverRateuses: coverallsapp/github-action@masterwith:github-token: ${{ secrets.GITHUB_TOKEN }}- name: 读取版本号id: versionuses: notiz-dev/github-action-json-property@releasewith:# 读取版本号path: './package.json'prop_path: 'version'- name: 打印版本号run: echo ${{steps.version.outputs.prop}}- name: 创建Releaseuses: softprops/action-gh-release@v1with:files: |./lib/index.umd.js./lib/index.esm.js./lib/index.cjs.jsname: v${{steps.version.outputs.prop}}tag_name: v${{steps.version.outputs.prop}}env:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}- name: 发布NPM包run: |npm config set //registry.npmjs.org/:_authToken=$NPM_TOKENnpm publishenv:# 配置 npm access token 环境变量NPM_TOKEN: ${{secrets.NPM_ACCESS_TOKEN}}

七、为readme添加测试覆盖率badge

  • 1、进入coveralls官网，授权 github，https://coveralls.io/
  • 2、授权后点击左侧侧边栏的 ADD REPOS，将需要生成badge徽章的库设置为on
  • 3、在readme中添加连接即可查看 <img src='https://coveralls.io/repos/github/{用户名}/{仓库名}/badge.svg?branch=main' />

八、整体目录结构

- .github- workflows- xx.yml        # git Actions
- .husky_pre-commit          # git提交钩子
- src- __test__          # 单元测试- index.ts          # 入口文件- isObject.ts
- .env.json             # 环境变量配置
- .eslintignore
- .eslintrc.js
- .gitignore
- .npmignore
- env-dependencies.js   # 环境变量读取脚本
- jest.config.js
- package.json
- rollup.config.js
- tsconfig.json

九、完整package.json配置

{"name": "your project name","version": "0.0.1","description": "your project description","browser": "lib/index.esm.js","module": "lib/index.esm.js","jsnext:main": "lib/index.esm.js","main": "lib/index.cjs.js","types": "lib/types/index.d.ts","files": ["lib"],"scripts": {"lint": "eslint --ext .ts src/","build": "rollup -c","test": "jest","test:single": "node env-dependencies.js","prepare": "husky install"},"envDependencies": {"params": ["jest ./src/__tests__/${TEST_FILE_NAME}.test.ts --coverage --collectCoverageFrom=./src/${TEST_FILE_NAME}.ts"]},"keywords": ["modules", "stdlib", "util"],"author": "Unknow","license": "MIT","devDependencies": {"@rollup/plugin-commonjs": "^25.0.0","@rollup/plugin-node-resolve": "^15.1.0","@rollup/plugin-terser": "^0.4.3","@rollup/plugin-typescript": "^11.1.1","@types/jest": "^29.5.2","@typescript-eslint/eslint-plugin": "^5.59.9","@typescript-eslint/parser": "^5.59.9","babel-jest": "^29.5.0","eslint": "^8.42.0","eslint-config-airbnb": "^19.0.4","husky": "^8.0.3","jest": "^29.5.0","jest-environment-jsdom": "^29.5.0","rollup": "^3.23.0","rollup-plugin-delete": "^2.0.0","ts-jest": "^29.1.0","tslib": "^2.5.2","typescript": "~5.0.4"},"repository": {"type": "git","url": "https://github.com/xxx.git"}
}

References

[1] 使用Typescript和Rollup从零开发一个工具库

[2] 一篇文章教会你如何在npm上传自己的包

[3] husky工具介绍

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/232968.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

通俗易懂的15个Java Lambda表达式案例

通俗易懂的15个Java Lambda表达式案例

文章目录 1. **实现Runnable接口**&#xff1a;2. **事件监听器**&#xff08;如Swing中的ActionListener&#xff09;&#xff1a;3. **集合遍历**&#xff08;使用forEach方法&#xff09;&#xff1a;4. **过滤集合**&#xff08;使用Stream API&#xff09;&#xff1a;5. …
阅读更多...
MATLAB基本绘图操作（二维和三维绘图）

MATLAB基本绘图操作（二维和三维绘图）

MATLAB基本绘图操作 文章目录 MATLAB基本绘图操作1、二维平面绘图1.1、线条&#xff08;折线图&#xff09;1.2、条形图1.3、极坐标图1.4、散点图 2、三维立体绘图2.1、三维曲面图2.2、三维曲线图&#xff08;点图&#xff09; 3、图片分区&#xff08;子图&#xff09; 1、二维…
阅读更多...
2024最新最全【CTF攻防夺旗赛教程】，零基础入门到精通

2024最新最全【CTF攻防夺旗赛教程】，零基础入门到精通

对于想学习或者参加CTF比赛的朋友来说&#xff0c;CTF工具、练习靶场必不可少&#xff0c;今天给大家分享自己收藏的CTF资源&#xff0c;希望能对各位有所帮助。 CTF在线工具 首先给大家推荐我自己常用的3个CTF在线工具网站&#xff0c;内容齐全&#xff0c;收藏备用。 1、C…
阅读更多...
（适趣AI）Vue笔试题

（适趣AI）Vue笔试题

&#x1f4d1;前言 本文主要是【Vue】——&#xff08;适趣AI&#xff09;Vue笔试题的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 …
阅读更多...
Java 堆的设计，如何用堆进行排序

Java 堆的设计，如何用堆进行排序

Java 学习面试指南&#xff1a;https://javaxiaobear.cn 1、堆的定义 堆是计算机科学中一类特殊的数据结构的统称&#xff0c;堆通常可以被看做是一棵完全二叉树的数组对象。 1、堆的特性 它是完全二叉树&#xff0c;除了树的最后一层结点不需要是满的&#xff0c;其它的每一层…
阅读更多...
Spring之代理模式

Spring之代理模式

1、概念 1.1 介绍 二十三种设计模式中的一种&#xff0c;属于结构型模式。它的作用就是通过提供一个代理类&#xff0c;让我们在调用目标方法的时候&#xff0c;不再是直接对目标方法进行调用&#xff0c;而是通过代理类间接调用。让不属于目标方法核心逻辑的代码从目标方法中…
阅读更多...
Python 面向对象之反射

Python 面向对象之反射

Python 面向对象之反射 【一】概念 反射是指通过对象的属性名或者方法名来获取对象的属性或调用方法的能力反射还指的是在程序额运行过程中可以动态获取对象的信息(属性和方法) 【二】四个内置函数 又叫做反射函数 万物皆对象&#xff08;整数、字符串、函数、模块、类等等…
阅读更多...
后端开发——JDBC的学习（三）

后端开发——JDBC的学习（三）

本篇继续对JDBC进行总结&#xff1a; ①通过Service层与Dao层实现转账的练习&#xff1b; ②重点&#xff1a;由于每次使用连接就手动创建连接&#xff0c;用完后就销毁&#xff0c;这样会导致资源浪费&#xff0c;因此引入连接池&#xff0c;练习连接池的使用&#xff1b; …
阅读更多...
霍兰德职业兴趣测试 60题（免费版）

霍兰德职业兴趣测试 60题（免费版）

霍兰德职业兴趣理论从兴趣的角度出发探索职业指导的问题&#xff0c;明确了职业兴趣的人格观念&#xff0c;使得人们对于职业兴趣的认识有了质的变化。在霍兰德职业兴趣理论提出来之前&#xff0c;职业兴趣和职业环境二者分别独立存在&#xff0c;正是霍兰德的总结&#xff0c;…
阅读更多...
阿里云服务器8080端口怎么打开？在安全组中设置

阿里云服务器8080端口怎么打开？在安全组中设置

阿里云服务器8080端口开放在安全组中放行&#xff0c;Tomcat默认使用8080端口&#xff0c;8080端口也用于www代理服务&#xff0c;阿腾云atengyun.com以8080端口为例来详细说下阿里云服务器8080端口开启教程教程&#xff1a; 阿里云服务器8080端口开启教程 阿里云服务器8080端…
阅读更多...
［通俗易懂］c语言中指针变量和数值之间的关系

［通俗易懂］c语言中指针变量和数值之间的关系

一、指针变量的定义 在C语言中&#xff0c;指针变量是一种特殊类型的变量&#xff0c;它存储的是另一个变量的内存地址。指针变量可以用来间接访问和操作内存中的其他变量。指针变量的定义如下&#xff1a; 数据类型 *指针变量名&#xff1b;其中&#xff0c;数据类型可以是任…
阅读更多...
jenkins安装报错：No such plugin: cloudbees-folder

jenkins安装报错：No such plugin: cloudbees-folder

jenkins安装报错&#xff1a;No such plugin: cloudbees-folder 原因是缺少cloudbees-folder.hpi插件 解决&#xff1a; 一&#xff0c;重新启动 http://xxx:8800/restart 二&#xff0c;跳到重启界面时&#xff0c;点击系统设置 三&#xff0c;找到安装插件&#xff0c;然…
阅读更多...
Python双端队列的3种实现及应用

Python双端队列的3种实现及应用

概述 双端队列&#xff08;deque&#xff0c;全名double-ended queue&#xff09;是一种具有队列和栈性质的线性数据结构。双端队列也拥有两端&#xff1a;队首&#xff08;front&#xff09;、队尾&#xff08;rear&#xff09;&#xff0c;但与队列不同的是&#xff0c;插入…
阅读更多...
【pytorch学习】 深度学习 教程 and 实战

【pytorch学习】 深度学习 教程 and 实战

pytorch编程实战博主&#xff1a;https://github.com/lucidrains https://github.com/lucidrains/vit-pytorch
阅读更多...
从0到1入门C++编程——04 类和对象之封装、构造函数、析构函数、this指针、友元

从0到1入门C++编程——04 类和对象之封装、构造函数、析构函数、this指针、友元

文章目录 一、封装二、项目文件拆分三、构造函数和析构函数1.构造函数的分类及调用2.拷贝函数调用时机3.构造函数调用规则4.深拷贝与浅拷贝5.初始化列表6.类对象作为类成员7.静态成员 四、C对象模型和this指针1.类的对象大小计算2.this指针3.空指针访问成员函数4.const修饰成员…
阅读更多...
C#，入门教程(08)——基本数据类型及使用的基础知识

C#，入门教程(08)——基本数据类型及使用的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(07)——软件项目的源文件与目录结构https://blog.csdn.net/beijinghorn/article/details/124139947 数据类型用于指定数据体&#xff08;DataEntity&#xff0c;包括但不限于类或结构体的属性、变量、常量、函数返回值&#xff09;…
阅读更多...
16、Kubernetes核心技术 - 节点选择器、亲和和反亲和

16、Kubernetes核心技术 - 节点选择器、亲和和反亲和

目录 一、概述 二、节点名称 - nodeName 二、节点选择器 - nodeSelector 三、节点亲和性和反亲和性 3.1、亲和性和反亲和性 3.2、节点硬亲和性 3.3、节点软亲和性 3.4、节点反亲和性 3.5、注意点 四、Pod亲和性和反亲和性 4.1、亲和性和反亲和性 4.2、Pod亲和性/反…
阅读更多...
stable diffusion 进阶教程-controlnet详解（持续更新中）

stable diffusion 进阶教程-controlnet详解（持续更新中）

说明 插件下载链接：https://pan.baidu.com/s/1-qmJzqcB72nTv_2QLmR-gA?pwd=8888 提取码: 8888 讨论Q群：830970289 个人微信：mindcarver 如果在按着教程尝试的过程中有错误或问题，可以上面询问讨论，或者评论区留言 如果教程有什么问题，请帮忙纠正，持续更新（部分控制插件…
阅读更多...
Android开发编程从入门到精通，安卓技术从初级到高级全套教学

Android开发编程从入门到精通，安卓技术从初级到高级全套教学

一、教程描述 本套教程基于JDK1.8版本&#xff0c;教学内容主要有&#xff0c;1、环境搭建&#xff0c;UI布局&#xff0c;基础UI组件&#xff0c;高级UI组件&#xff0c;通知&#xff0c;自定义组件&#xff0c;样式主题&#xff1b;2、四大组件&#xff0c;Intent&#xff0…
阅读更多...
数据库的连接

数据库的连接

连接数据库 我们使用WinR输入cmd打开运行窗口 输入:sqlplus并回车 输入用户名和密码,我用的是Scott,密码我自己设置的123456,Scott默认的密码是tiger,回车 这种情况表示登录成功 在连接Scott成功的情况下创建一些数据,在我的资源里面有个Oracle数据基础可以下载,直接复制粘…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发