小白发布typescript开发的npm包总结

前置知识点

• 前往www.npmjs.com/ 注册一个npm账号
• 如果设置了npm淘宝镜像，请先还原它，文章中默认已还原，发布完成后可再设置回来

还原：npm config set registry https://registry.npmjs.org/
设置：npm config set registry http://registry.npm.taobao.org/

• npm过滤部分文件参考www.jianshu.com/p/6c2f5c31b…
• 有关A包引入C1.0.0，B包引入C2.0.0的情况，npm做了优化,具体情况可以参考大佬们的文章。总之npm都帮你优化好了，一般我们不用处理。
• 有时间可以了解一下liaolongdong.com/2019/01/24/…

创建项目

• 新建空文件，执行npm init,设置自己的版本和包名称
• 修改package.json文件，我们将引入部分包：ntypescript用于打包，以前是tsc、typescript、假设我们开发一个时间显示工具包，我们引入moment。

下面是我个人的package.json文件，其中注意main、types文件，表示输出文件。更多配置请参考www.npmjs.com/package/nty…

{
  "name": "wd-npm-demo",
  "version": "1.0.0",
  "description": "My npm package written in TS",
  "main": "index.js",
  "types": "index.d.ts",
  "scripts": {
    "build": "ntsc",
    "publish": "npm run build && npm publish",
    "tsp": "ntsc -p ./"
  },
  "author": "wen.da",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.29.1",
  },
  "devDependencies": {
    "ntypescript": "1.201706190042.1",
    "typescript": "^4.1.2"
  },
  "file": [
    ".idea",
    "package-lock.json",
    "bin"
  ]
}

运行npm i

• 新增tsconfig.json文件，解决编译提示问题"declaration": true

可以设置"allowSyntheticDefaultImports": true来允许从没有默认导出的模块进行默认导入，或者 "skipDefaultLibCheck": true来跳过库文件的声明文件类型检查。
下面是我个人的，当然，你也可以使用最新的es

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2017", "es7", "es6", "dom"],
    "declaration": true,
    "outDir": "dist",
    "strict": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "dist"]
}

• 根目录新建index.ts文件，我的文件如下

import moment from 'moment'
export function renderDate(val?: Date){
  if (!val) return '';
  return moment(val).format('YYYY-MM-DD')
}
export function renderTime(val?: Date){
  if (!val) return '';
  return moment(val).format('YYYY-MM-DD HH:mm:ss')
}
export function renderTimes(val?: Date){
  if (!val) return '';
  return moment(val).valueOf();
}

发布项目

• 打开终端cd到该项目
• npm login登录输入账号、密码、邮箱
• 执行npm publish发布源码
• 如果只发布dist包，请执行npm run build,生成来dist文件，在dist文件下创建package.json文件，然后发布dist包就行了
• 在自己的项目中npm i wd-npm-demo或者自己发布的包，然后试试吧

import { renderDate, renderTime, renderTimes } from 'wd-npm-demo';
console.log(renderDate(new Date()))
console.log(renderTime(new Date()))
console.log(renderTimes(new Date()))

小提示

• 包名不能和已有的包名重复，撤销后24小时内该包名也不能用了
• 我们还可以创建.md文件来写开发者语录
• 版本升级记得改版本号
• 72小时内可撤销npm unpublish wd-npm-demo --force
• 为了保持npm的环境，删除我们自己的测试包