npm发布js工具包

news2025/6/9 18:47:07

一、创建项目

  • 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模块名称，自动挂载至window
                sourcemap: 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"],
    // 配置测试环境ua
    testEnvironmentOptions: {
        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 CI

on:
  push:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest
    
    permissions:
      contents: write

    strategy:
      matrix:
        node-version: [16.20.0]

    steps:
      - name: 检出分支
        uses: actions/checkout@v3

      - name: 初始化缓存
        uses: actions/cache@v3
        id: cache-dependencies
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles(\'**/package-lock.json\')}}

      - name: Use Node.js ${{ matrix.node-version }}
        # 使用actions/setup-node插件
        uses: actions/setup-node@v3
        with:
          # node版本
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      - run: npm ci
      # 生成测试覆盖率
      - run: npm run test
      - run: npm run build
      
      - name: 上报测试覆盖率
        id: coverRate
        uses: coverallsapp/github-action@master
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: 读取版本号
        id: version
        uses: notiz-dev/github-action-json-property@release
        with:
          # 读取版本号
          path: './package.json'
          prop_path: 'version'

      - name: 打印版本号
        run: echo ${{steps.version.outputs.prop}}

      - name: 创建Release
        uses: softprops/action-gh-release@v1
        with:
          files: |
            ./lib/index.umd.js
            ./lib/index.esm.js
            ./lib/index.cjs.js
          name: 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_TOKEN
          npm publish
        env:
          # 配置 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.coloradmin.cn/o/1355074.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Zookeeper 分布式服务协调治理框架介绍入门

Zookeeper 分布式服务协调治理框架介绍入门

文章目录 为甚么需要Zookeeper一、Zookeeper 介绍1.1 介绍1.2 Zookeeper中的一些概念1.2.1 集群角色1.2.2 会话 session1.2.3 数据节点 Znode1.2.4 版本1.2.5 事件监听器 Watcher1.2.6 ACL 权限控制表(Access Control Lists) 二、 Zookeeper的系统模型2.1.1 ZNode节点2.1.2 ZNo…
阅读更多...
亿可达：提升工作效能的秘诀

亿可达：提升工作效能的秘诀

在竞争激烈的职场中&#xff0c;提高工作效率对于个人和团队都至关重要。而选择适合自己的工作效率软件&#xff0c;可以为我们提供更好的工作协作和任务管理体验。下面是我个人推荐的一些实用工作效率软件&#xff0c;希望能对您有所帮助。 1. Any.do&#xff1a;Any.do是一款…
阅读更多...
AI小冰入驻淘宝 将提供虚拟人陪伴服务

AI小冰入驻淘宝 将提供虚拟人陪伴服务

AI小冰正式入驻淘宝&#xff01; 据悉&#xff0c;小冰在淘宝开出了“小冰旗舰店”、以及手淘小程序“X Eva 克隆人的平行世界”&#xff0c;为消费者提供基于KOL虚拟人带来的陪伴服务体验。用户搜索“小冰旗舰店”就可以直达店铺进行选购。 ​小冰旗舰店的首批商品包括冰花直充…
阅读更多...
‘react-native‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

‘react-native‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

原因&#xff1a;没有下载react-native 解决下载react-native npm i -g react-native-cli
阅读更多...
19｜BabyAGI：根据气候变化自动制定鲜花存储策略

19｜BabyAGI：根据气候变化自动制定鲜花存储策略

19&#xff5c;BabyAGI&#xff1a;根据气候变化自动制定鲜花存储策略 随着 ChatGPT 的崭露头角&#xff0c;我们迎来了一种新型的代理——Autonomous Agents&#xff08;自治代理或自主代理&#xff09;。这些代理的设计初衷就是能够独立地执行任务&#xff0c;并持续地追求长…
阅读更多...
使用 Jupyter 分析 ROS 消息时间间隔抖动数据

使用 Jupyter 分析 ROS 消息时间间隔抖动数据

ROS 是一个分布式机器人操作系统软件框架&#xff0c;节点之间通过松耦合的方式进行组合&#xff0c;包括使用 Topic、RPC 服务和参数服务器等方式进行通信。其中&#xff0c;Topic 是最常见的一种通信方式&#xff0c;例如一个雷达传感器节点实时采集三维点云数据&#xff0c;…
阅读更多...
WEB 3D技术 three.js 几何体uv属性讲解与基本演示

WEB 3D技术 three.js 几何体uv属性讲解与基本演示

本文 我们来说说uv 那么 它是什么呢&#xff1f; 首先 比如 我们几何体 贴一个图 那么 为什么我们图的四个边就能正好贴到几何体的边 为什么不可以图就在几何体中间呢&#xff1f; 中心为什么能对齐 它就不能偏一点吗&#xff1f; 这是第一个问题 还有我们 gltf 这种文件 其实…
阅读更多...
服务器防护怎么做

服务器防护怎么做

随着网络攻击的日益猖獗&#xff0c;服务器安全已成为关注的焦点。如何有效防御各种网络威胁&#xff0c;确保数据安全与业务连续性&#xff0c;已成为一项迫切的需求。目前服务器所面临的主要威胁包括但不限于&#xff1a;DDoS攻击、SQL注入、跨站脚本攻击(XSS)、远程命令执行…
阅读更多...
Linux_CentOS_7.9_Oracle11gr2配置数据库及监听服务自启动多方案实操之简易记录

Linux_CentOS_7.9_Oracle11gr2配置数据库及监听服务自启动多方案实操之简易记录

前言： 作为运维保障，都无法准确预估硬件宕机的突发阶段，其生产数据实时在产出，那作为dba数据库服务以及相关Listener的其重要性、必要性就突显而出。这里拿虚拟机试验做个配置记录，便于大家学习参考。 实现方法一： 环境变量值：：$ORACLE_HOME= /data/oracle/product/1…
阅读更多...
利用深度学习图像识别技术实现教室人数识别

利用深度学习图像识别技术实现教室人数识别

引言 在现代教育环境中&#xff0c;高效管理和监控教室成为了一个重要议题。随着人工智能技术的迅猛发展&#xff0c;特别是深度学习和图像识别领域的突破&#xff0c;我们现在可以通过智能系统来自动识别教室内的人数&#xff0c;从而实现更加智能化的教室管理。 深度学习与图…
阅读更多...
可调恒流电子负载的工作原理

可调恒流电子负载的工作原理

可调恒流电子负载是能够模拟真实负载的电子设备&#xff0c;它可以在电源和负载之间提供稳定的电流。这种设备在电源测试、电池充放电测试、电源老化测试等领域有着广泛的应用。 可调恒流电子负载的工作原理主要基于欧姆定律和功率守恒定律。欧姆定律指出&#xff0c;电流通过一…
阅读更多...
聚名平台域名外部入库流程

聚名平台域名外部入库流程

如果您的域名是在聚名平台管理&#xff08;不管注册商是聚名还是阿里云、腾讯云等其他注册商&#xff09;&#xff0c;外部入库时请选择聚名。 在外部入库操作之前&#xff0c;请先登录聚名平台获取聚名平台的用户ID和邮箱信息。详细的账户ID和邮箱信息获取位置如下图&#xff…
阅读更多...
八、HTML 链接

八、HTML 链接

一、HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。 HTML中的链接是一种用于在不同网页之间导航的元素。 链接通常用于将一个网页与另一个网页或资源&#xff08;如文档、图像、音频文件等&#xff09;相关联。 链接允许用户在浏览网页时单击文本或图像来跳转到其…
阅读更多...
C#: Label、TextBox 鼠标停留时显示提示信息

C#: Label、TextBox 鼠标停留时显示提示信息

说明&#xff1a;记录在 Label、TextBox 控件上 鼠标停留时显示提示信息的方法。 1.效果图 2.具体实现步骤 1. 在Form 窗口中先创建 Label 并取名&#xff1a;KEY_label &#xff0c;或 TextBox 取名&#xff1a;KEY_textBox 在 Form1 函数中添加初始化代码&#xff0c;如下&…
阅读更多...
各章练习题解析

各章练习题解析

目录 第1章 EDIT模型概述 题目 解析 第1章 EDIT模型概述 题目 第1题 第2题
阅读更多...
深度学习中的大模型「幻觉」问题：解析、原因及未来展望

深度学习中的大模型「幻觉」问题：解析、原因及未来展望

如何解决大模型的「幻觉」问题&#xff1f; 什么是大模型「幻觉」 大模型幻觉是指在深度学习领域中&#xff0c;尤其是涉及大型神经网络时&#xff0c;模型展现出在理论上不应具备的性能或能力。这种现象可能导致误导性的结果&#xff0c;表现为在训练数据上过度拟合&#xff0…
阅读更多...
Apache 网页优化

Apache 网页优化

技能目标&#xff1a; 掌握 Apache 网页压缩掌握 Apache 网页缓存掌握Apache 隐藏版本信息掌握 Apache 网页防盗链 1.1网页压缩与缓存 在使用 Apache 作为 Web 服务器的过程中&#xff0c;只有对 Apache 服务器进行适当的优化配 置才能让 Apache 发挥出更好的性能。反过来说&…
阅读更多...
CompressAI:深度学习与传统图像压缩

CompressAI:深度学习与传统图像压缩

1、图像压缩算法原理 传统的有损图像压缩方法&#xff0c;如JPEG &#xff0c; JPEG2000 &#xff0c; HEVC或AV1或VVC&#xff0c;在类似的编码方案上进行了迭代改进&#xff1a;将图像划分为像素块&#xff0c;使用变换域通过线性变换(例如:DCT或DWT)去相关空间频率&#xf…
阅读更多...
Unity 打包AB 场景烘培信息丢失

Unity 打包AB 场景烘培信息丢失

场景打包成 AB 资源的时候&#xff0c;Unity 不会打包一些自带相关的资源 解决办法&#xff1a;在 Project settings > Graphics下设置&#xff08;Automatic 修改成 Custom&#xff09;
阅读更多...
ELement UI时间控件el-date-picker误差8小时解决办法

ELement UI时间控件el-date-picker误差8小时解决办法

一、问题描述&#xff1a; 在项目中引用了elementui中的date-picker组件&#xff0c;选中的时间跟实际相差八小时&#xff0c;且格式不是自己想要的格式 <el-date-pickertype"date"placeholder"选择日期"format"yyyy/M/d"v-model"form…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023