https://registry.npmjs.org/-/v1/search?text=canvas-plus
新建文件夹 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重名了,需要换一个名字
配置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"
}
增加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
增加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+
增加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
里
# 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
}
增加codeclimate
https://codeclimate.com 授权Github
访问权限
复制TEST REPORTER ID
写入在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-[email protected]
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ㄒ)/~~