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

一、关于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",
  },