npm包开发[健壮/可迭代]

renmm commented 2 years ago

在开发npm包时，约定目录结构，有助于理解代码结构。

lib包用途

功能	说明	场景
纯node环境	符合commonjs规范，适合node环境使用	node server端，比如工具包，日志等
浏览器使用	使用script方式引入	组件库，client端使用
cli命令行工具	命令行使用，例如工具包/脚手架之类	命令行工具

lib 包技术架构

统一使用ts编码，好处：类型提示

ts: 源码编写
rollup: 打包工具
doc: 文档工具

目录约定

按目录约定:	功能	说明
src	源码目录
lib	打包输出的代码，也有dist目录，可以统一约定lib
es	符合es module规范的代码
umd	符合umd规范的代码，给浏览器的script 直接饮用
typings	类型定义

假设开发一个lib包: lib-a, 按照约定：

lib-a
  ├── umd
  |    └── index.js
  ├── es
  |    └── index.js
  ├── lib
  |    └── index.js
  ├── src -- 源码目录
  |    └── index.js
  ├── typings
  |    └── index.d.ts
  ├── .gitignore
  └── package.json
// package.json
{
  "main": "lib/index.js",
  "module": "es/index.js",
  "types": "typings/index.d.ts"
}

文档

READMD.md - 这个是作为你的库在 npm 网站上的主页。
CHANGELOG.md
LICENSE

单测

单元测试，

benchmark (基准测试)

基准，用于基准测试，就是一个性能的衡量基准。

发布管理

使用semantic-release 去自动管理发布可参考https://blog.dteam.top/posts/2020-05/semantic-release.html

参考

npm package开发指南-包内容篇

renmm commented 2 years ago

使用mrm解放双手

自动安装以上步骤，需要写一个mrm-task

ps: mrm需要node >= 14 版本（如果node版本低于14，使用nvm切换）

举例以mrm官网的readme来讲：执行:官网里的代码

npx mrm license readme

在cli里会报异常: ![Uploading image.png…]()

解决方案：全局安装mrm ：

# 安装mrm
yarn global add mrm 
# 查看yarn global
yarn global list

renmm commented 2 years ago

发布Pure ESM package

在使用Inquirer时，发现v9版本发布的是ESM。不支持require访问。

如果你也想在node环境里发布esm模块，推荐阅读Pure ESM package

具体好处及实践请看上面的规范

简单总结下前置依赖:

Update the "engines" field in package.json to Node.js 14: "node": ">=14.16". (Excluding Node.js 12 as it's no longer supported)

node版本要求14.16 （可以放低到12.0.0，node 12开始支持esm）

给lib包加ts类型定义，可参考以下规范：

typescript-definition-style-guide

renmm / blogs