项目地址:loan-calculate-utils

npm包的发布、更新查看上一篇文章 开发一个基础的npm包

目前我们的目录是这个样子:

.
├── source 源代码目录
│   └── index.js
├── package.json
└── README.md

接下来给项目添加 打包,忽视文件,ts声明文件,单元测试,eslint,README.md添加徽标。

打包

参考 ramda 打包思路,我们将要编译成三种包,以及它们的压缩版。

打包目标

  1. umi: babel source -> src
  2. iife: webpack 立即调用的函数包,用于浏览器
  3. cjs: webpack CommonJS包,用于modejs

配置 Babel,编译 umi

安装babel相关依赖

npm install --save-dev @babel/cli @babel/core @babel/preset-env

新建 .babelrc.json 文件

{
"presets": [
"@babel/preset-env"
],
"plugins": []
}

添加编译命命令,修改 package.json

"scripts": {
+ "build:cjs": "babel source --out-dir src"
},

配置 webpack,编译 iife,cjs

安装webpack相关依赖

npm install --save-dev webpack webpack-cli babel-loader cross-env

新建 webpack.config.js

const path = require('path');
const isMin = !!~process.env.NODE_ENV.indexOf('min');
const type = process.env.NODE_ENV.replace(/:.*/g, '');
const libraryTarget = type === 'iife' ? 'window' : type; const config = {
mode: isMin ? 'production' : 'development',
entry: './source/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: `index.${type}${isMin ? '.min' : ''}.js`,
library: 'loanCalculateUtils', // 整个库对外暴露的变量名
libraryTarget, // 变量名添加到哪个上 browser
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
},
plugins: [],
}; module.exports = config;

添加运行命令,修改 package.json

"scripts": {
"build:cjs": "babel source --out-dir src",
+ "build:umd": "cross-env NODE_ENV=umd webpack",
+ "build:umd:min": "cross-env NODE_ENV=umd:min webpack",
+ "build:iife": "cross-env NODE_ENV=iife webpack",
+ "build:iife:min": "cross-env NODE_ENV=iife:min webpack",
# 整合打包命令
+ "build": "npm run build:cjs && npm run build:umd && npm run build:umd:min && npm run build:iife && npm run build:iife:min"
},

添加 忽视文件

.gitignore

打包文件不需要上传GitHub

新建文件 .gitignore

node_modules
package-lock.json # umi打包目录
/dist # mjs打包目录
/src

.npmignore

忽略npm无关文件

新建文件 .npmignore

node_modules
package-lock.json # 源文件目录
source # 测试文件目录
test # 忽视文件
.gitignore
.npmignore # babel配置文件
.babelrc.json # eslint配置文件
.eslintrc.js # webpack配置文件
webpack.config.js

添加 TypeScript 声明文件

TypeScript

发布声明文件到npm,有两种方式:

  1. 与你的npm包捆绑在一起,或
  2. 发布到npm上的@types organization。

下面我们来使用第一种方式。

新建 types/index.d.ts

/**
* Average Capital Plus Interest(等额本息)
*/
export function calcAverageCapitalPlusInterest({ amount, term, rate }: {
amount: number; // 贷款金额
term: number; // 贷款期数(月数)
rate: number; // 年利率
}): {
totalPayment: string; // 总还款
totalInterest: string; // 总利息
list: {
period: number; // 第几期
monthlyPayment: string; // 月供
beginningBalance: string; // 当月还款前剩余本金
interest: string; // 月供利息
principal: string; // 月供本金
endingBalance: string; // 当月还款后剩余本金
}[]
};

修改 package.json, 设置 types属性指向捆绑在一起的声明文件。Including declarations in your npm package

"types": "types/index.d.ts",

发布后使用时效果:

添加单元测试 jest

jest 是facebook推出的一款测试框架。运行命令 jest 后会自动运行项目下所有.test.js和.spec.js这种格式的文件。

install

npm install --save-dev jest

加入测试命令,修改 package.json

"scripts": {
···
+ "test": "jest"
},

新建 test/index.test.js

import { calcAverageCapitalPlusInterest, calcAverageCapital } from '../source/index';

test('average capital plus interest term: 1', () => {
expect(calcAverageCapitalPlusInterest({
amount: 1000000,
term: 1,
rate: 4.9,
})).toStrictEqual({
totalPayment: "1004083.33",
totalInterest: "4083.33",
list: [
{
period: 1,
monthlyPayment: "1004083.33",
beginningBalance: "1000000.00",
interest: "4083.33",
principal: "1000000.00",
endingBalance: "0.00",
}
]
});
});

运行 npm run test

添加 ESLint

你可以使用 npm 安装 ESLint:

npm install eslint --save-dev

紧接着你应该设置一个配置文件:

./node_modules/.bin/eslint --init

会生成一个 .eslintrc 配置文件,配置查看文档 Configuring ESLint

之后,你可以在任何文件或目录上运行ESLint如下:

./node_modules/.bin/eslint yourfile.js

加入检查命令,修改 package.json

"scripts": {
···
+ "lint": "eslint source/*"
},

执行 npm run lint

  • extends: 使用的规则
  • parserOptions.sourceType = "module": 使用模块
  • rules: 看不惯哪些规则可以关了

README.md 添加 徽标

GitHub徽标官网是 shields.io

徽标图标格式

https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg

例如

![build](https://img.shields.io/badge/build-passing-success.svg)
![npm package](https://img.shields.io/badge/npm%20package-1.1.3-success.svg)

会显示

带链接的徽标

[![](https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg)]({linkUrl})

GitHub动态徽标

完善 package.json 基本信息

# 项目名称
"name": "loan-calculate-utils",
# 作者
"author": "whosmeya",
# 版本号
"version": "1.1.2",
# 项目表述
"description": "loan calculate utils",
# 项目入口文件(node_modules中引入的入口文件)
"main": "src/index.js",
# TypeScript 生命文件入口(编辑器中会看到方法提示)
"types": "types/index.d.ts",
# 代码仓库
"repository": {
"type": "git",
"url": "git+https://github.com/whosmeya/loan-calculate-utils.git"
},
# issues地址
"bugs": {
"url": "https://github.com/whosmeya/loan-calculate-utils/issues"
},
# 主页地址
"homepage": "https://github.com/whosmeya/loan-calculate-utils#readme",
# 开源许可证(更多查看:https://www.cnblogs.com/whosmeya/p/12564815.html)
"license": "MIT",
# 运行脚本
"scripts": {},
# 依赖(作为npm包被install时,依赖会被下载进node_modules)
"dependencies": {},
# 开发依赖(作为npm包被install时,开发依赖不会被下载进node_modules)
"devDependencies": {},

开发一个健壮的npm包的更多相关文章

  1. 开发一个基础的npm包

    初始化项目 # 新建文件夹 mkdir whosmeya-npm-package-test # 进入 cd whosmeya-npm-package-test/ # 初始化 package.json, ...

  2. 如何开发一个自己的npm包

    目录 一.初始化npm包 二.新建自己的工具类 三.新建入口文件index.js 四.编写单元测试 五.登录仓库 六.发布包 七.安装使用 八.删除包 一.初始化npm包 npm init 运行输入包 ...

  3. 发布一个简单的npm包

    本文简单地记录了发布一个简单npm包的过程,以便后续参考使用. 初始化npm init 通过npm init创建一个package.json文件 D:\robin\lib\weapp-utils> ...

  4. 如何自己写一个公用的NPM包

    以markdown-clear,创建过程为例,讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1 创建并使用一个工程 在GitHub上新建一个仓库,其名markdown-clear clone ...

  5. npkill 一个方便的npm 包清理工具

    npm 包很好用,但是占用空间太多了,npkill 提供了一个方便的工具,可以帮助我们查找安装的npm 包,以及进行清理 安装 npm install -g npkill 简单使用 命令 npkill ...

  6. 如何用AR Engine开发一个虚拟形象表情包?

    现如今,人们在网上聊天.发帖时越来越爱用表情包,表情包一方面是一种个性化的表达方式,另一方面更能传达出当下的心理活动,可以说在网络社交中表情包是一个不可或缺的存在.加上近年来元宇宙的兴起,3D虚拟形象 ...

  7. 开发一个项目之npm

    npm (nodejs平台上写的js模块的管理工具  下载.互相依赖等) npm install 本地项目的node_modules文件夹  , -g  npm config prefix 目录eg: ...

  8. npm_一个有意思的npm包

    $ npm install yosay const yosay = require('yosay'); console.log(yosay('Hello, and welcome to my fant ...

  9. (转)前端开发-发布一个NPM包之最简单易懂流程

    原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...

随机推荐

  1. Web Scraper 高级用法——抓取属性信息 | 简易数据分析 16

    这是简易数据分析系列的第 16 篇文章. 这期课程我们讲一个用的较少的 Web Scraper 功能--抓取属性信息. 网页在展示信息的时候,除了我们看到的内容,其实还有很多隐藏的信息.我们拿豆瓣电影 ...

  2. web前端——美化效果总结

    概述 项目开发过程中使用到了不少web前端美化效果的方法,总结一下 1 图片作为背景 要实现的效果是,任意一张图片"img-page-background.png",不需要调整图片 ...

  3. 解决 Highcharts 中 yAxis 的 max 设置无效的问题

    问题场景 $(function () { Highcharts.chart('container', { title: { text: 'line' }, xAxis: { categories: [ ...

  4. 前端开发--Mongodb篇

    安装和启动 安装 官方安装文档 本地mac Os推荐使用Homebrew ⚠️ 目前直接使用--brew install mongodb-- 安装 mongodb 时提示:Error: No avai ...

  5. vue中的插槽(slot)

    vue中的插槽,指的是子组件中提供给父组件使用的一个占位符,用<slot></slot>标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替 ...

  6. 峰哥说技术:09-Spring Boot整合JSP视图

    Spring Boot深度课程系列 峰哥说技术—2020庚子年重磅推出.战胜病毒.我们在行动 09  峰哥说技术:Spring Boot整合JSP视图 一般来说我们很少推荐大家在Spring boot ...

  7. 【原创】(求锤得锤的故事)Redis锁从面试连环炮聊到神仙打架。

    这是why技术的第38篇原创文章 又到了一周一次的分享时间啦,老规矩,还是先荒腔走板的聊聊生活. 有上面的图是读大学的时候,一次自行车骑行途中队友抓拍的我的照片.拍照的地方,名字叫做牛背山,一个名字很 ...

  8. ggplot2(8) 精雕细琢

    8.1 主题 主题系统控制着图形中的非数据元素外观,它不会影响几何对象和标度等数据元素.这题不能改变图形的感官性质,但它可以使图形变得更具美感,满足整体一致性的要求.主题的控制包括标题.坐标轴标签.图 ...

  9. CrawlSpiders简介

    转:https://www.cnblogs.com/ellisonzhang/p/11124516.html#4295547 一.CrawlSpiders类简介 通过下面的命令可以快速创建 Crawl ...

  10. juery 弹出框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...