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

时间:2021-1-18 作者:admin

前置知识点

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

创建项目

  • 新建空文件,执行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的环境,删除我们自己的测试包
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。