前言

白浪费了那么多有用的代码.jpg
避免今后用到相同的代码却要在不同的仓库里反复找实现我决定把公用的代码抽出来方便以后能用(方便脑子短路的时候找不到合适的代码)
成果：
https://www.npmjs.com/package/zlinni_common_pkg?activeTab=readme

编写代码

首先 GitHub 建一个仓库，我写的是 zlinni_common_pkg 之后添加一个 README，然后导出
clone 仓库后，npm init 出现 packgejson(稍后看)
新建一个 src 文件夹
新建一点代码 zlinniTool.ts

1
2
3

export const sayHi = (): string => {
  return "Hello~";
};

包的规则

打开我们的 pkgjson
这是我写的规则附加注释

{
  "name": "zlinni_common_pkg", //npm仓库对应的名字 不是github仓库的名字 这个包名一定不能重复
  "version": "1.0.0", //包体对应的版本
  "description": "个人工具库", //包体的功能性描述
  "main": "./dist/zlinniTool.js", //入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsup src/zlinniTool.ts --minify" //打包脚本 这个之后看
  },
  "repository": {
    "type": "git", //git 和仓库地址
    "url": "git+https://github.com/Zlinni/common_pkg.git"
  },
  "author": "zlinni",
  "license": "ISC",
  "bugs": {
    // 提交bug的地址
    "url": "https://github.com/Zlinni/common_pkg/issues"
  },
  "homepage": "https://github.com/Zlinni/common_pkg#readme", // npm首页展示
  "devDependencies": {
    "tsup": "^6.5.0"
  },
  "keywords": [
    //搜索关键词
    "zlinni",
    "common_pkg"
  ]
}

关于包名查重

直接去网站搜
执行命令
npm view 包名
如果找不到就不重复

包的构建

构建包体我们用到了 tsup 这个工具
是一款快速构建 ts 包体的工具
命令
tsup <入口js> --minify

--minify 可以缩小打包体积
然后就可以写在 packagejson 的 build 里面
执行 npm run build 就可以进行构建
就会看到打包出了一个 dist 文件，里面有 zlinniTool.js 和 zlinniTool.mjs 两个文件

`tsup` 工具配置

分为两种一种是单独写一个 tsup.config.ts 一种是直接在 packgejson 里面写
首先前者

  import { defineConfig } from 'tsup'

export default defineConfig({
// 入口文件 或者可以使用 entryPoints 底层是 esbuild
entry: ['src/zlinniTool.ts'],

// 打包类型 支持以下几种 'cjs' | 'esm' | 'iife'
format: ["cjs", "esm"],

// 生成类型文件 xxx.d.ts
dts: true,

// 代码分割 默认 esm 模式支持 如果 cjs 需要代码分割的话就需要配置为 true
splitting: false,

// sourcemap
sourcemap: false,

// 每次打包先删除 dist
clean: true,

// outExtension({format}){
// return {
// js:`.${format}.js`
// }  
// }
});

这里比较关键的是 dts 先写为 false
后者则是直接写进去推荐前者

包的发布

上 npm 网站注册一个账号https://www.npmjs.com/
然后控制台 npm login 登录自己的账号 npm publish 发布
去网站上查看是否存在自己的包体存在则成功

去除无用的内容

当我们在网站上浏览的时候会发现有 dist 目录，src 目录等
实际上对于包体的使用者来说是不需要 src 目录的也就是不需要真实的代码
打个比方前端打包出来的 dist 目录是可以直接给到运维去构建的他们也不需要关注我们的真实代码只要 dist 能跑就行
同时上传了 src 目录也增加了我们包体的体积
修改方式如下：
打开 packgejson 增加一行

1	"files": ["/dist","/README.md","/package.json"]// 只上传这些信息很重要

然后我们 npm publish 发现不行这是因为我们没有修改版本号
我们只做了点小修改所以把版本号改为 1.0.1 即可

发布之后就会看到只剩下这些东西了

dts

在自己的项目中执行 npm install zlinni_common_pkg
获取到相关的依赖后引入文件
会发现没有类型提示这是为什么呢？因为没有写 dts
dts 引入方法 tsup.config.ts 中 dts 设置为 true
dts: true
然后继续 build 发现缺少了内容 typescript
因为 tsup 虽然处理 ts 但是对于 ts 的生成还是需要 typescript 的支持
所以我们要安装一下 ts

1	npm i typescript -D

再次 build 发现 build 成功了
打开 dist 目录找到了 zlinniTool.d.ts
这个就是函数的类型文件
再次 publish
在对应的项目中执行
npm update zlinni_common_pkg
进行更新就找得到类型声明了
一些问题
如果没有对 tsconfig 进行配置，那么可能输出的时候会缺少 module 的识别
添加代码 tsconfig.json

{
"compilerOptions": {
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost",
"ES6",
"ES2015",
"ES2015.Promise",
"ES2015.Generator"
]
},
}