Front-end engineering: understanding of npm package management and publishing a package to npm

1. npmCognition about the package version number

• 1. npmThe meaning of a simple package version

  "moment": "^2.22.1"
  

• 2. Explanation of version number

  • major.minor.patch[-当前版本属于]
  • major: Subversively changed version (similar angular1-->angular2changes)
  • minor: Functional iterative version
  • patch: Simple fix bugversion
  • The fourth most common one is
    • Alpha: Beta version
    • Beta:Public Beta
    • RC: Preview version before the official version is released

• 3. Several ways to lock the package

  • ^At the beginning, the first version cannot be changed
  • ~At the beginning, the second version cannot be changed
  • >=Which version is greater than

Two, several dependency methods that can be used in the project

• 1. Project dependency dependencies[common]
• 2. Development dependency devDependencies[common]
• 3, the same dependence peerDependencies[such bootstrapdependency jquerysame]
• 4. Optional dependencies optionalDependencies[for example minireset.css]
• 5. Package dependenciesbundleDependencies

Three, the basic steps of writing a toolkit

• 1. Initialize the project (note that the project name cannot have Chinese special characters)

  npm init --yes
  

• 2. Create a binfolder under the project to store the code

  #! /usr/bin/env node
  // 需要在shell窗口中能执行的文件,必须先申明使用申明环境的
  

• 3. package.jsonConfigure commands in

  "bin": {
        
        
    "mp": "./bin/mp.js"
  }
  

• 4. Create a shortcut to the computer's npmglobal package

  npm link
  

• 5. linkThe result of running the command in the window

• 6. Commands for temporary local packaging

  npm pack
  

• 7. Install directly where the project needs to be installed

  npm install 目录/包名
  

Fourth, npmthe preparation before releasing a package

• 1. Configure the package.jsonfile

  {
        
        
    "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. Find out if there is a package with the same name

  • Simply go to the npmjsofficial website to search

• 3. Correct way to modify the version number release

Don't directly modify package.jsonthe version in the file manually. You can't create one if you manually modify it tag. Use the following command to modify the automatically modified version, and create one tag. When submitting to the gitwarehouse, you can take a snapshot of the currenttag

• npm version patch : Upgrade revision number
• npm version minor : Upgrade minor version number
• npm version major : Upgrade the major version number

Five, publish a package to npmthe

• 1. Use to nrmcheck if the current mirror source is npmjsofficial

  nrm ls
  # or
  nrm current
  
  # 切换镜像源的方式
  nrm use 名称
  

• 2. Login and release

  npm addUser
  npm publish
  # 删除远程仓库的一个包,删除后24小时候才可以发同名的包
  npm unpublish --force
  

6. Supplementary explanation, now more and more packages need to support tscode. When publishing, you can try to use it tsto write

• 1. The initial project is the same as above

• 2. Command generationtsconfig.json

  tsc --init 
  

• 3. tsconfig.jsonThe contents of the folder

  {
        
        
    "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.jsonConfigure the conversion command x.d.tsin the file, and the file will be automatically generated after the conversion

  "scripts": {
        
        
    "build": "tsc",
  },