NPM 发包 js 文件并支持 ts 使用（包含 gulp 打包压缩）

news2025/1/11 18:38:16

主篇 npm 上传发布自定义组件以及使用详细流程。
npm login 报错：Unexpected token < in JSON at position 0 while parsing near ‘<!DOCTYPE HTML PUBLI…’。

$ npm login
Username: dengzemiao
Password: 
Email: (this IS public) xxxx@163.com
npm notice Please check your email for a one-time password (OTP)
Enter one-time password from your authenticator app: 29006106
Logged in as dengzemiao on https://registry.npmjs.org/.

检查线上是否存在将要提交的包名，如果有就换个，如果有就会出来信息，如果没有就会报错，说明包名可以用。
```
$ npm view 包名
```
初始配置文件
```
$ npm init

或

$ npm init -y
```

新建一个 index.js 文件，可以本地安装到项目中测试使用。附：npm 包本地调试（详细流程：包本地路径、npm link 、yalc）

// 测试属性
export const dzmName = 'dzm'
export const dzmAge = 18

// 测试方法
export function dzmFunc (name, age) {
  return `名字：${name}，年龄：${age}`
}

在新建一个 index.d.ts，也可以通过第三方插件 dts-gen 自动生成。

JS 库必须要提供类型声明文件，才能在 TS环境使用。

类型声明文件的主文件名与JS库文件的主文件名相同，后缀为 d.ts。比如库的文件名为 index.js，则类型声明文件名为 index.d.ts
```
// 声明测试属性
export const dzmName: string;
export const dzmAge: number;

// 声明测试方法
export function dzmFunc (name: string, age: number): string;
```
这样在 ts 文件中就会提示警告了，这里使用的 npm link 本地调试的。

且如果没有 d.ts 声明文件，会报错找不到声明文件
然后通过 Gulp 打包压缩 js 文件到指定目录详细流程（修改文件名与后缀），打包压缩后，进入到 dist 文件夹中去发布
```
$ npm publish
```
后面就是正常的安装包使用，注意安装包时如果使用的是非官方镜像，可能会存在延迟，所以推荐官方镜像安装。
```
# 查看包最新信息
$ npm view dzmtest
```