前端工程化:关于npm包管理的认知及发布一个包到npm上
程序员文章站
2022-05-01 21:20:07
...
一、关于npm
包版本号的认知
-
1、一个简单的
npm
包的版本意思"moment": "^2.22.1"
-
2、版本号的解释
major.minor.patch[-当前版本属于]
-
major
: 颠覆性的改变版本(类似angular1-->angular2
的改变) -
minor
: 功能性的迭代版本 -
patch
: 简单修复bug
的版本 - 第四位常见的有
-
Alpha
:内测版本 -
Beta
:公测版 -
RC
:发布正式版本前的预览版本
-
-
3、关于锁包几种方式
-
^
开头的表示第一个版本不能改变 -
~
开头的表示第二个版本不能改变 -
>=
表示大于什么版本
-
二、项目中可以使用包的几种依赖方式
- 1、项目依赖
dependencies
[常见] - 2、开发依赖
devDependencies
[常见] - 3、同等依赖
peerDependencies
[比如bootstrap
依赖jquery
一样的] - 4、可选依赖
optionalDependencies
[比如minireset.css
] - 5、打包依赖
bundleDependencies
三、书写一个工具包的基本步骤
-
1、初始化项目(注意项目名不能有中文特殊字符)
npm init --yes
-
2、项目下创建一个
bin
的文件夹存放代码#! /usr/bin/env node // 需要在shell窗口中能执行的文件,必须先申明使用申明环境的
-
3、在
package.json
中配置命令"bin": { "mp": "./bin/mp.js" }
-
4、创建快捷方式到计算机的
npm
全局包中npm link
-
5、在窗口中运行命令试试
link
的结果 -
6、临时本地打包的命令
npm pack
-
7、在需要安装项目的地方直接安装
npm install 目录/包名
四、发布一个包到npm
的前的准备
-
1、配置好
package.json
文件{ "name": "", // 包名 "version": "", // 版本号 "description": "", // 简单的描素,告诉npm这个是做什么的 "main": "lib/index.js", // 入口文件 "scripts": { // 需要执行的脚本 "build": "tsc" }, "keywords": [ // 关键词,方便别人搜索到你的包 ], "homepage": "", // 用于指定该模块的主页 "repository": { // 用于指定模块的代码仓库 "type": "git", "url": "https://github.com/xxx" }, "author": "", // 作者邮箱,方便别人发邮件到你邮箱 "license": "MIT", // 开源许可号 "files": [ // 需要发布到npm上的文件夹,或者使用.npmignore类似.gitignore来忽视不需要发布的文件 "dist", "lib", "es" ] }
-
2、查找是否有重名的包
- 简单直接到
npmjs
官网搜索
- 简单直接到
-
3、修改版本号发布的的正确方式
别手动直接修改
package.json
文件里面的版本,手动修改的不能创建一个tag
,使用下面的命令会修改自动修改版本好,及创建一个tag
,提交到git
仓库的时候,可以快照一份当前的tag
-
npm version patch
: 升级修订版本号 -
npm version minor
: 升级次版本号 -
npm version major
: 升级主版本号
五、发布一个包到npm
上
-
1、使用
nrm
查看当前的镜像源是不是npmjs
官方的nrm ls # or nrm current # 切换镜像源的方式 nrm use 名称
-
2、登录及发布
npm addUser npm publish # 删除远程仓库的一个包,删除后24小时候才可以发同名的包 npm unpublish --force
六、补充说明,现在越来越多的包要支持ts
代码。发布的时候可以尽量使用ts
来写
-
1、初始化项目和上面一样的
-
2、命令生成
tsconfig.json
tsc --init
-
3、
tsconfig.json
的文件夹内容{ "compilerOptions": { /* Basic Options */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "lib": ["es6"], /* 编译需要的库文件,例如你指定的 target 是 ES5,但是在代码中使用了 ES6 特性,就需要在 lib 中加上 ES6 */ "declaration": true, /* 是否生成文件的声明文件 */ "outDir": "./lib", /* 输出目录 */ "strict": true, /* Enable all strict type-checking options. */ }, "include": ["./src/**/*"], "exclude": ["node_modules", "**/__tests__/*"] }
-
4、在
package.json
中配置转换命令,转换后会自动生成x.d.ts
的文件"scripts": { "build": "tsc", },
上一篇: Linux启动与停止jar包运行
下一篇: 秋季进补别忘也要排毒