简单发布一个 ts 的 npm 包通过 TypeScript 编写一些通用的 JavaScript 工具函数，并能通过

注册NPM账号

首先需要注册npm账号，可参照 npm中文网上的“设置npm用户账号”进行。

遇到的问题

填写完账号信息，在提交后，页面报错提示：we are unable to verify your captcha...。

明显没注册成功，注册的邮箱也没收到任何邮件。

重复折腾了几次，中间还提示过用户已存在，以为不小心注册成功了，决定直接登录试试，结果还是失败了😂。

最终突然反应过来，可能是用户名已经注册过了。。。

换了个长点的用户名再次提交，总算注册成功了！

靠！这一开始的报错提示能不能准确点！

登录NPM账号

网页上登录成功后显示如下：

发布npm包时用的是在命令行界面执行命令发布的，所以需要在命令行界面登录下npm账号。

在命令行上，键入登录命令: npm login。
出现提示时，输入你的用户名、密码和电子邮件地址。
要测试你是否已成功登录，键入npm whoami。显示你的npm用户名，说明登录成功。

初始化项目

mkdir xavier-es-peach // 创建项目目录

cd xavier-es-peach

npm init -y // 快速初始化

npm install typescript --save-dev // 安装typescript包

npm install ts-add-js-extension --save-dev // 给编译生成的js文件中的import路径自动添加.js后缀

配置 tsconfig.json

{
  "compilerOptions": {
    "removeComments": false,
    "sourceMap": true,
    "declaration": true,
    "strict": true,
    "strictFunctionTypes": false,
    "moduleResolution": "Node",
    "target": "ESNext",
    "isolatedModules": true,
    "outDir": "build"
  },
  "include": ["./src/index.ts"]
}

配置 package.json

{
  "name": "xavier-es-peach",
  "version": "1.0.1",
  "description": "A small javascript function tool library.",
  "files": [ "build"], // npm发布目录
  "type": "module",
  "main": "build/index.js",
  "types": "build/index.d.ts",
  "sideEffects": false,
  "scripts": {
    "build": "tsc && ts-add-js-extension --dir=build"
  },
  "keywords": [
    "ts",
    "func"
  ],
  "author": "Xavier",
  "license": "MIT",
  "engines": {
    "node": ">=12.17.0"
  },
  "devDependencies": {
    "ts-add-js-extension": "^1.6.4",
    "typescript": "^5.4.5"
  }
}

代码目录

// 很简单，就两个文件
- src
-- index.ts
-- nums.ts

示例代码

nums.ts 文件，里面一个求和函数。

export function xSum(...values: number[]): number {
  return values.reduce((pre, next) => pre + next, 0);
}

index.ts 文件，导入并导出 xSum 函数。

export { xSum } from "./nums";

编译代码

npm run build

代码生成情况

本地测试

在本地创建一个测试项目，对刚才编译好的包进行发布前的简单试用。

mkdir test-demo

cd test-demo

npm init -y

npm install /Users/{替换为本地路径}/xavier-es-peach // 前面npm包的本地路径

包安装成功。

配置 type: "module"，配置 type: "module"，配置 type: "module"。重要的事说三遍‼️

发布npm包

测试没问题后，回到包代码路径，发布。


npm publish

可以看到发布成功了

使用看看

打开前面使用的测试项目，留下 src 目录，删除其它文件。

然后：

更新npm包

本地更新后，直接 npm publish 会发布失败。

You cannot publish over the previously published versions

需要：

npm version patch

npm publish