欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端工程化:关于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",
    },
    
相关标签: 其它