开发一个健壮的npm包

项目地址: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": {},

原文地址:https://www.cnblogs.com/whosmeya/p/12623973.html

时间: 2024-11-05 12:24:02

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

如何简单的发布一个react组件npm包

可以简单使用https://www.npmjs.com/package/create-component-lib这个npm进行发布 该包的具体的实现方式https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b 该教程中更正点 1. npm install --save-dev @babel/core @babel/cli @b

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

原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容: 以下为package.json内容: { "name": "z

创建并发布npm包

1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容: 以下为package.json内容: { "name": "zgb_npm", "version": "1.0.0&qu

不会发布npm包?进来包会!

前言 本文从发布一个简单的npm包开始,逐步对它进行完(踩)善(坑)和扩(装)展(逼),最后得到一个相对完善的npm包,下面就让我们手摸手,呸!手把手的开始吧! 一.一个最简单的npm包 1.1 新建文件夹 可以找个地方直接建个文件夹,最好语义化一点,这样以后也方便管理,我们这里用终端建文件夹: mkdir toupper-case-project // 这里我们建了一个名为toupper-case-project的文件夹 (对命令行还不太熟的小伙伴可以看看我这篇博客命令行不会?看这里) 1.2

怎么开发一个npm包

一.注册npm账号* 怎么将代码提到github,大家都知道需要一个github账号* 同样,开发一个npm包,当然也需要一个npm账号,将npm包发布到npm的托管服务器* 注册地址:[http://npmjs.org](http://npmjs.org)* 该实例包含了模块的局部调用和全局调用两种方式 二.开发npm包 1.目录构建* npm init* 项目结构:```javascript.├── bin //命令配置├── README.md //说明文档├── index.js //主

在2018年如何优雅的开发一个typescript语言的npm包?

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表 很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 年,如果我想要初始化这样的一个模块,我需要做哪些步骤呢?: 答案是:创建一个优雅的,对开发者友好的模块,至少需要以下 15 个步骤 初始化文件夹,初始化 git 仓库,初始化 npm,初始化 tsc 修改 tsconfig.js 配置 添加 npm 脚本 添加 tslint 校验代码规则以及 ed

开发npm包

1.创建项目,使用npm init name:填写你这个包的名字,默认是你这个文件夹的名字. 注:最好先去npm上找一下有没有同名的包.也可以在命令行里面输入npm install 你要取的名字,如果报错,npm上没有跟你同名的包. version:你这个包的版本,默认是1.0.0 description:包描述 entry point:入口文件,默认是index.js test command:测试命令,这个直接回车就好了 git repository:这个是git仓库地址,如果你的包是先放到

编写一个供浏览器端使用的NPM包

此文已由作者吴维伟授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在编写程序时,总会有一些代码是我们不愿意一遍又一遍重复地去写的,比如一些UI或交互相似组件,或是一些相似的流程或逻辑.以前,面对这样的情况,我会将可以复用的部分抽象出来,做成可以复用的模块,放在专门存放公用模块的文件夹中,便于查找和引用.但是这样只能解决单个项目中公用模块复用的问题,如果你的模块需要被多个项目复用,那么就需要另寻它法了.本文讨论的是通过发布npm包来实现模块复用时有哪些注意事项. 新建一个

如何发布一个npm包?

npm包在现在前端开发中经常使用且便利,而我也是经常使用,而没研究怎么去发布npm.那如何发布npm包呢? 一.在npm的官网上注册一个账号登录,https://www.npmjs.com/ 注意此步骤记住登录名和密码,后面会使用到 二.新建一个目录,比如study,进入到这个study目录里,使用 npm login 命令登录,按照提示操作: 注意 password 输入时不显示,继续按正确方式输入就行,不影响 三.进入study目录,执行命令npm init 初始化项目生成package.j