发布npm包质量分测试

最新推荐文章于 2024-07-18 14:54:59 发布
最新推荐文章于 2024-07-18 14:54:59 发布
阅读量728 收藏
点赞数 1
分类专栏： Node # GitHub 文章标签： npm 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyisonger/article/details/133798089
版权

查询质量分接口

https://registry.npmjs.org/-/v1/search?text=canvas-plus

v0.0.1 quality 0.2987

新建文件夹 canvas-plus

执行命令 npm init

生成package.json

{
  "name": "@3r/canvas-plus",
  "version": "0.0.1",
  "description": "a extension methods to canvas.",
  "main": "index.js",
  "scripts": {
    "test": "echo test"
  },
  "keywords": [
    "canvas",
    "tool",
    "extension"
  ],
  "author": "@3r",
  "license": "MIT",
  "dependencies": {
    "@3r/tool": "^1.3.2"
  }
}

新建 index.js文件

在文件夹下执行

# 先登录 如果登录过忽略
npm login
# 发布一个版本
npm publish --access=public

Q:

Package name too similar to existing package xxx;

A:

package.json中的name重名了，需要换一个名字

v0.0.2 quality 0.3234

配置typescript

安装开发依赖包

npm install -D typescript

配置tsconfig.json

{
    "compilerOptions": {
        "target": "ES2016", // 指定ECMAScript目标版本
        "module": "ESNext", // 指定模块化类型
        "declaration": true, // 生成 `.d.ts` 文件
        "outDir": "./", // 编译后生成的文件目录
        "strict": true, // 开启严格的类型检测
        "sourceMap": false,
        "allowJs": true,
        "skipLibCheck": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": []
}

新建src文件夹

新建src/index.ts文件

export function add(a: number, b: number) {
    return a + b
}

执行npx tsc进行代码编译

新建github仓库

将代码上传至仓库

新增.gitignore文件，忽略某些文件上传

node_modules/

新增.npmignore文件，忽略某些文件发布

/src
/.vscode
/.github

新建README.md，简单介绍一下

# Canvas +

This a extension methods package to canvas.

## Platform

- [x] ie11+

修改package.json追加仓库地址信息

{
  "name": "@3r/canvas-plus",
  "version": "0.0.2",
  "description": "a extension methods to canvas.",
  "main": "index.js",
  "scripts": {
    "test": "echo test"
  },
  "keywords": [
    "canvas",
    "tool",
    "extension"
  ],
  "author": "@3r",
  "license": "MIT",
  "dependencies": {
    "@3r/tool": "^1.3.2"
  },
  "devDependencies": {
    "typescript": "^5.2.2"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/White-Dews/canvas-plus.git"
  },
  "bugs": {
    "url": "https://github.com/White-Dews/canvas-plus/issues"
  },
  "homepage": "https://github.com/White-Dews/canvas-plus#readme"
}

v0.0.3 quality 0.6709

增加jest

安装依赖

npm i -D jest

安装转换依赖

npm i -D @babel/plugin-transform-modules-commonjs

新建.babelrc文件

{
    "env": {
        "test": {
            "plugins": [
                "@babel/plugin-transform-modules-commonjs"
            ]
        }
    }
}

新建jest.config.cjs文件

// jest.config.js
module.exports = {
    // 收集测试覆盖率
    collectCoverage: true
}

新建test文件夹

新建test/index.test.js测试文件

import { add } from "../index.js"

describe('canvas-plus', function () {
    it('add', function () {
        expect(add(1, 2)).toEqual(3)
        expect(add(2, 1)).toEqual(3)
        expect(add(1.5, 1.5)).toEqual(3)
        expect(add(1.2, 1.8)).toEqual(3)
    })
})

增加测试脚本命令在package.json文件中

"test": "jest --coverage"

增加eslint

安装依赖

npm i -D eslint
npm i -D @typescript-eslint/eslint-plugin
npm i -D @typescript-eslint/parser

新建.eslintignore文件

*.js
*.cjs

新建.eslintrc.json文件

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "indent": [
            "warn",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "warn",
            "single"
        ],
        "semi": [
            "warn",
            "never"
        ],
        "no-tabs": "off",
        "generator-star-spacing": "off",
        "no-unused-vars": "off",
        "no-useless-escape": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "space-before-function-paren": "off",
        "no-extend-native": "off",
        "prefer-rest-params": "off",
        "lines-between-class-members": "off"
    }
}

增加格式检查脚本命令在package.json文件中

"lint": "npx eslint src/*.ts --fix"

完整的package.json文件

{
  "name": "@3r/canvas-plus",
  "version": "0.0.2",
  "description": "a extension methods to canvas.",
  "main": "index.js",
  "scripts": {
    "test": "jest --coverage",
    "lint": "npx eslint src/*.ts --fix"
  },
  "keywords": [
    "canvas",
    "tool",
    "extension"
  ],
  "author": "@3r",
  "license": "MIT",
  "dependencies": {
    "@3r/tool": "^1.3.2"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.23.0",
    "@typescript-eslint/eslint-plugin": "^6.7.5",
    "@typescript-eslint/parser": "^6.7.5",
    "eslint": "^8.51.0",
    "jest": "^29.7.0",
    "typescript": "^5.2.2"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/White-Dews/canvas-plus.git"
  },
  "bugs": {
    "url": "https://github.com/White-Dews/canvas-plus/issues"
  },
  "homepage": "https://github.com/White-Dews/canvas-plus#readme",
  "type": "module",
  "typings": "index.d.ts"
}

更新.npmignore文件

/src
/.vscode
/.github
/coverage

执行脚本

npm run test
npm run lint

v0.0.4 quality 0.6986

增加LICENSE文件

MIT License

Copyright (c) 2023 林一怂儿

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

给README.md增加徽章

# Canvas +

![npm](https://img.shields.io/npm/dw/@3r/canvas-plus)![npm](https://img.shields.io/npm/v/@3r/canvas-plus)

This a extension methods package to canvas.

## Platform

- [x] ie11+

v0.0.5 quality 0.8224

增加coveralls

https://coveralls.io/ 授权Github访问权限

新建.github/workflows/ci.yml文件

name: CI Pipeline

on:
  push:
    branches: [main]
    paths:
      - "**/*.test.js"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 18.x
        uses: actions/setup-node@v1
        with:
          node-version: 18.x
      - run: |
          yarn install
          yarn run lint
          npx tsc
          yarn run test
      - name: Coveralls
        uses: coverallsapp/github-action@master
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

CI成功后，将徽章赋值到README.md里

img

# Canvas +

[![Coverage Status](https://coveralls.io/repos/github/White-Dews/canvas-plus/badge.svg?branch=main)](https://coveralls.io/github/White-Dews/canvas-plus?branch=main)![npm](https://img.shields.io/npm/dw/@3r/canvas-plus)![npm](https://img.shields.io/npm/v/@3r/canvas-plus)

This a extension methods package to canvas.

## Platform

- [x] ie11+

完整的package.json文件

{
  "name": "@3r/canvas-plus",
  "version": "0.0.4",
  "description": "a extension methods to canvas.",
  "main": "index.js",
  "scripts": {
    "test": "jest --coverage",
    "lint": "npx eslint src/*.ts --fix"
  },
  "keywords": [
    "canvas",
    "tool",
    "extension"
  ],
  "author": "@3r",
  "license": "MIT",
  "dependencies": {
    "@3r/tool": "^1.3.2"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.23.0",
    "@typescript-eslint/eslint-plugin": "^6.7.5",
    "@typescript-eslint/parser": "^6.7.5",
    "eslint": "^8.51.0",
    "jest": "^29.7.0",
    "typescript": "^5.2.2"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/White-Dews/canvas-plus.git"
  },
  "bugs": {
    "url": "https://github.com/White-Dews/canvas-plus/issues"
  },
  "homepage": "https://github.com/White-Dews/canvas-plus#readme",
  "type": "module",
  "typings": "index.d.ts",
  "engines": {
    "node": ">=8"
  },
  "publishConfig": {
    "access": "public"
  },
  "pre-commit": [
    "fix"
  ],
  "sideEffects": true
}

v0.0.6 quality 0.8302

增加codeclimate

https://codeclimate.com 授权Github访问权限

复制TEST REPORTER ID

img

写入在github setting action secrets 中 起名为 TESTREPORTERID

值赋值进去

最新.github/workflows/ci.yml文件

name: CI Pipeline

on:
  push:
    branches: [main]
    paths:
      - "**/*.test.js"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 18.x
        uses: actions/setup-node@v1
        with:
          node-version: 18.x
      - run: |
          yarn install
          yarn run lint
          npx tsc
          yarn run test
      - name: Coveralls
        uses: coverallsapp/github-action@master
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
      - name: Codeclimate
        uses: paambaati/codeclimate-action@v3.2.0
        env:
          CC_TEST_REPORTER_ID: ${{ secrets.TESTREPORTERID }}
        with:
          coverageCommand: yarn run test
          debug: true

最新README.md文件

# Canvas +

![action](https://img.shields.io/github/actions/workflow/status/White-Dews/canvas-plus/ci.yml)[![Coverage Status](https://coveralls.io/repos/github/White-Dews/canvas-plus/badge.svg?branch=main)](https://coveralls.io/github/White-Dews/canvas-plus?branch=main)![npm](https://img.shields.io/npm/dw/@3r/canvas-plus)![npm](https://img.shields.io/npm/v/@3r/canvas-plus)[![Code Climate](https://codeclimate.com/github/White-Dews/canvas-plus/badges/gpa.svg)](https://codeclimate.com/github/White-Dews/canvas-plus)[![Test Coverage](https://codeclimate.com/github/White-Dews/canvas-plus/badges/coverage.svg)](https://codeclimate.com/github/White-Dews/canvas-plus/coverage)![MIT](https://img.shields.io/npm/l/@3r/tool)

This a extension methods package to canvas.

## Platform

- [x] ie11+

后面的提升就很慢很慢了… 有缘再更/(ㄒoㄒ)/~~

林一怂儿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
发布一款npm包帮助理解npm的使用
10-17
总结来说，发布npm包的流程包括：创建项目、初始化`package.json`、编写代码、测试、登录npm、发布包、迭代更新以及在其他项目中使用。通过这个过程，你可以深入了解npm的工作原理，更好地管理你的前端项目。记住，...
npmTest:测试npm包
05-05
本教程将深入探讨如何进行npm包的测试，确保代码的质量和稳定性。 一、npm包简介 npm包是开发者共享的模块，包含了可重用的代码库，可以解决特定的编程问题。通过npm，你可以安装、更新、发布和管理这些包，从而...
怎样挑选一个好的NPM包？
月光恋九霄的博客
12-31 284
我最近写了一篇关于如何加快 React 开发的文章，其中提到使用包而不是重新造轮子。例如，你几乎肯定希望使用一个 modal 库，而不是构建你自己的实现。（我说“几乎肯定”，是包括那些受虐狂在内。）我之前的推荐有限定条件。使用第三方库会带来风险。每周都有恶意软件包的新闻。从一个废弃的包迁移代码花费了数百万开发工时。 作为一个例子，我将比较一些比较流行的 React 组件库，评估它们在可持续性、性能和安全方面的风险。我不会深入比较主观方面的问题，例如 APIs 和 UI，尽管这些无疑是选择一个包的主要因素。
如何发布自己的npm包
学海无涯
01-22 1090
以上就是发布自己的npm包的详细步骤。请确保你在发布之前进行了充分的测试，并遵循npm的最佳实践和规范，以提供高质量和稳定的包给其他开发者使用。
前端如何封装自己的npm包并且发布到npm注册源
乐闻世界
06-08 588
在前端开发中，复用代码是一种常见且高效的实践。通过封装和发布自己的npm包，你可以轻松地在多个项目之间共享代码，并且贡献给社区。以下是一步一步指导你如何封装自己的npm包并发布到npm注册源。现在已经知道如何封装并发布一个npm包，通过这种方式，你可以提高代码的复用性，也可以为开源社区做出贡献。持续维护和改进你的包，随着时间的推移，它可能会成为许多项目的依赖之一。
发布自己的npm包的步骤与技巧
2301_77541824的博客
01-20 587
通过以上步骤和技巧，你可以成功发布自己的npm包，并与其他开发者共享你的代码和模块。记住，持续改进和维护是非常重要的，希望你能够享受发布npm包的过程！
HOW - 编写并发布一个 npm 包模块（含 CLI 工具包开发）
weixin_58540586的博客
04-24 959
npm 包模块是指通过 npm（Node Package Manager）管理的可重用的代码包。这些包可以包含 JavaScript 代码、样式表、图像、文档等资源，以及配置文件和其他必要的内容。npm 包模块使开发者能够轻松地共享和重用代码，从而加快了软件开发的速度并提高了代码质量。今天我们将介绍编写和发布一个npm包模块以及涉及的相关细节。
全面指南：如何发布自己的npm插件包
全世界的博客
06-06 1255
本文全面介绍了从零开始创建、配置、测试到发布npm插件包的详细步骤，包括项目初始化、代码编写、配置文件设置、本地测试、打包、发布及后续维护。旨在帮助开发者高效地将自己的组件或插件分享到npm社区。
npm发布自己的插件包
zevjay的博客
06-10 2240
发布npm包是分享代码、贡献社区的直接方式。通过遵循上述步骤和注意事项，你可以顺利地将自己的劳动成果分享给全世界的开发者。记住，持续维护和优化你的包，及时响应用户反馈，是提升包质量和受欢迎度的关键。祝你在npm之旅上取得成功！
NPM包更新指南：如何发布新版本到NPM仓库
2402_85761468的博客
06-20 728
NPM（Node Package Manager）是JavaScript编程语言的包管理器，它允许开发者发布和共享代码包。随着项目的发展，可能需要更新已发布的NPM包以修复错误、添加新功能或改进性能。本文将详细介绍如何更新已发布的NPM包，包括准备工作、版本控制、更改日志记录以及发布流程。
使用npm发布typescript包
qq_42880714的博客
11-30 514
使用npm发布typescript包
xyz：发布更少的npm程序包
02-03
在IT行业中，npm（Node Package Manager...通过以上方法，开发者可以更有效地管理npm包，减少不必要的发布，同时提高代码质量和用户体验。在实践中，每个项目都有其独特的需求，因此需要根据具体情况灵活应用这些策略。
PublishDiff预览npm发布更改
08-10
总的来说，"PublishDiff预览npm发布更改"是一个强大而实用的工具，它提高了JavaScript开发者的发布质量，减少了潜在问题，提升了团队的开发效率。掌握并合理利用这类工具，对于任何JavaScript项目的成功都是非常关键...
Node.js如何优雅的封装一个实用函数的npm包的方法
10-17
5. **发布npm包**：完成以上步骤后，你需要创建一个npm账号，然后在项目根目录下执行`npm init`来生成`package.json`文件。在此文件中，填写项目名称、版本、描述、作者等信息。接着，使用`npm publish`命令发布你的...
PNPM 高效入门：安装配置一本通
与墨的编程成长历程
07-15 1394
PNPM（Package Manager），发音为“ pineapple ”，是一个快速、节省磁盘空间的包管理器，它通过引入“内容可寻址的文件系统”概念，确保每次安装都复用相同的依赖，从而大大减少了节点模块的存储占用。PNPM 同时兼容 npm 的和格式，无缝衔接现有项目。PNPM 以其独特的优势，正在逐步改变我们管理 Node.js 项目依赖的方式。通过本篇文章的学习，相信你已经掌握了 PNPM 的安装、配置以及基本操作，准备好迎接一个更为高效、整洁的开发环境。
解决npm install（‘proxy‘ config is set properly. See: ‘npm help config‘）失败问题
最新发布
weixin_43589681的博客
07-18 244
重装电脑系统后，使用npm install初始化项目依赖失败了，错误提示：‘proxy’ config is set properly…经过报错信息查询解决办法，最终找到了两个比较好的方案，在此总结一下，以便下次再遇到此类问题。
IDEA实现NPM项目的自打包自发布自部署
Pleasure1234的博客
07-17 1316
最近在研究项目的打包发布以及其在生产环境下的部署谈谈Vue前端项目的自动打包，以及发布到Github Packages和部署到服务器注：由于本人将前端项目和后端项目放置在了一个项目文件夹下，所以统一使用IDEA进行打开运行以及编辑。还是推荐使用WebStorm来进行前端项目的编辑（或者VScode）还是以之前的这个校园墙仓库为例，注：使用的node版本是12.22.12GitHub - Pleasurecruise/NottinghamWall: 宁波诺丁汉大学校园墙(个人项目，管理端已上线)
vue3前端开发-执行npm run dev提示报错怎么解决
yrldjsbk的博客
07-17 466
但是当我执行npm run dev想启动它时报错了说，找不到dev。如图，我使用vscode打开了这个项目，但是我进入了路径不对，我第一次进入了路径是外层目录，我并无进入真正的项目内部。旧版本vue2底层使用的是webpack脚手架搭建的项目，启动命令是:npm run serve。实际上，不必惊慌，这是因为我自己的项目存档路径，进行了一次嵌套操作，所以引起的故障。vue3技术，是使用的vite作为底层的脚手架来搭建项目的，因此，使用该脚手架 搭建的项目，启动命令也变成了：npm run dev。
npm视角：2018 JavaScript回顾与2019年预测
"这篇资源是npm官方发布的关于2018年JavaScript的回顾以及对2019年的预测报告，提供了JavaScript开发趋势的洞察。报告基于npm联合创始人兼COO劳里·沃斯的演讲，并结合了超过16,000名开发者调查的数据，对JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林一怂儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值