前端工程化:关于npm包管理的认知及发布一个包到npm上

水痕001
381 阅读3分钟

一、关于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",
},
avatar
文章
阅读
粉丝