前置知识点
- 前往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的环境,删除我们自己的测试包