How to distribute an NPM package – create, publish, update, undo and FAQ resolution

One, foreword

Most recent articles will probably focus on building the VueCodeBase. A brief description of the codeBase: A deeply customized Vue project scaffolding, currently has a three-terminal (PC + APP + background management) base framework built in login, exit, Vuex state management and data persistence, Ajax-AXIOS encapsulation, interface Mock, multi-environment configuration, integration of common components, UI library, Tools, methods, filters and other functions are still being gradually expanded, such as permission management, skeleton screen, universal component extraction and so on. The goal is to automatically generate universal basic framework and reusable code and integrate a set of common Demo that covers daily development needs. It is conducive to engineering, component-based construction, team precipitation technology, In order to create a customized version of VUE-CLI, and in the future, extract common modules from Codebase and package them into NPM, we will introduce how to create and distribute a NPM packageCopy the code

Second, process introduction

In order to save you time, let's cut to the basics and automatically skip over what NPM is, what does it do, global/local installation/deletion, etc.Copy the code

Here we use the example of releasing the NPM package to the NPM official website (it may be released to private servers within the company)

1. Register the NPM account 2. Verify the mailbox (this step is very important, you may encounter unexpected problems and fail to publish) 3. Log in NPM account (note that switching mirror, taobao mirror is not available; NPM publish publish NPM package (package name problem; How to ignore some files you don't want to upload) 6. View and test using the NPM package 7. Update NPM package version (VERSION management rules of NPM) 8. Undo published NPM package (how to force undo) 9. Common Problems and solutions (mirroring problem, login failure, mailbox authentication, duplicate/similar package name, etc.)Copy the code

3. 1. Register an NPM account

To publish your own packages to NPM, you need to register an NPM account

Registration address: www.npmjs.com/

Four, two, verify mailbox

NPM publish cannot publish NPM packages without validating the mailbox. 126 or QQ mailbox still cannot publish after receiving the verification link and verification. Finally, I had to ask NPM customer service for help. The problem has been solved, and this part will be recorded in detail laterCopy the code

NPM init initializes the project

Create project directory, initialize NPM project:

Create a project directory, for example, npmModuleDemo. CD Run NPM init in this directory to initialize an NPM projectCopy the code

Configure package.json as prompted:

{
  "name": "demo-publish-npm-module"."version": "1.0.0"."description": "demo-publish-npm-module"."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git"."url": ""
  },
  "keywords": [
    "npmmodule"."demo"]."author": {
    "name": "bravewang"."email": "[email protected]"
  },
  "license": "MIT"
}
Copy the code

Parameter Description:

name: Name naming rule - Cannot contain uppercase letters, Spaces, or sliders. NPM determines the uniqueness by the package name (name field). For example, android/ios apps cannot have the same package name in the same APP market. It is best to check whether the package name has been used in NPM first, to avoid the package name conflict during the release. If the package name needs to be changed, the problem will be solved later in the main: configure entry JS fileCopy the code

Simply write some code logic for testing -hello:

// index.js
function sayHello(name){
    console.log("hello : " + name);
}

exports.sayHello = sayHello;
Copy the code

Six, four, log in to NPM account

The code is written and cannot be published, you need to log in NPM first:

Usually for reasons of harmony, most developers' NPM points to Taobao mirrorCopy the code

Here you need to switch back to the official NPM image before logging in:

Query the current mirror address: NPM get registry Settings taobao mirror: NPM config set registry Settings http://registry.npm.taobao.org/ official NPM mirror: npm config set registry https://registry.npmjs.org/Copy the code

After switching, log in to NPM:

1) First login: NPM adduser

BravedeMacBook-Pro:npmModuleDemo brave$ npm adduser
Username: bravewang
Password: 
Email: (this IS public) [email protected]
Logged in as bravewang on https://registry.npmjs.org/.
Copy the code

2) Non-first login: NPM login

BravedeMacBook-Pro:npmModuleDemo brave$ npm login
Username: bravewang
Password: 
Email: (this IS public) [email protected]
Logged in as bravewang on https://registry.npmjs.org/.
Copy the code

View current login: NPM whoami

BravedeMacBook-Pro:npmModuleDemo brave$ npm  whoami
bravewang
Copy the code

Seven, five, release the NPM package

After creating the NPM project, writing the code logic, switching the image address, and logging into NPM, you are now ready to publish

Publish command: NPM publish

BravedeMacBook-Pro:npmModuleDemo brave$ npm publish npm notice npm notice ? [email protected] NPM notice === Tarball Contents === NPM notice 411B package.json NPM notice 82B index.js npm notice 174B .idea/misc.xml npm notice 278B .idea/modules.xml npm notice 458B .idea/npmModuleDemo.iml npm notice 186B .idea/ vc.xml NPM notice 11.kb. idea/ workshop. XML NPM notice === Tarball Details === NPM notice name: Demo-publish-npm-module NPM notice Version: 1.0.0 NPM notice Package Size: 3.4KB NPM notice Unpacked Size: 13.0 kB NPM notice shasum: 15 ae6ba456021fc27211d3ab09841e103f26b24b NPM notice integrity: sha512 0 enajkxhimu1j [...]. X/nAb9bzEvDYg== NPM notice Total Files: 8 NPM notice + [email protected]Copy the code

Note:

In order to demonstrate the re-release, the package has just been released, can not be re-released within 24 hours after the rerelease, do not play with fireCopy the code

There may be some problems that cause the release to fail, such as:

1) Login authorization problem 2) NPM package whose package name is occupied or has a similar package name 3) Verify that no mailbox exists 4) Cannot be re-published within 24 hours after being revoked See the following frequently asked Questions and solutions for the above problemsCopy the code

How to ignore some files you don’t want to upload:

If you write it to.gitignore or.npmignore, it's automatically ignored when it's uploadedCopy the code

Eight, six, view and test the NPM package

After successful publishing, log in to NPM and search for the newly published NPM package and you can see the record:

Download and test the released NPM package:

npm install demo-publish-npm-module
Copy the code

Introduction:

let a = require('demo-publish-npm-module')
a.sayHello('bravewang')
Copy the code

Output:

Hello: bravewangCopy the code

9, 7, update the NPM package version

If the contents of the NPM package are updated, you need to upgrade the NPM package versionCopy the code

NPM community version number rules adopt Semver (semantic version)

Format: Major version number. Minor version number. Revision number Increment rule: Major version number: when you make an incompatible API change Minor version number: when you make a backward-compatible functional addition Revision number: when you make a backward-compatible problem fix Prior version number and build information can be added to the major version number. Second version number. Revision number "is followed as an extensionCopy the code

Check the current package version -npm version:

BravedeMacBook-Pro:npmModuleDemo brave$ npm version
{ 'demo-publish-npm-module': '1.0.0'.npm: '6.4.1'.ares: '1.10.1 - DEV.cldr: '32.0'.http_parser: '2.8.0'.icu: '60.1'.modules: '57'.napi: '3'.nghttp2: '1.32.0'.node: '8.12.0'.openssl: '1.0.2 p'.tz: '2017c'.unicode: '10.0'.uv: '1.19.2'.v8: '6.2.414.66'.zlib: '1.2.11' }
Copy the code

Update version number and release:

1) Directly update the version number: NPM version New version number

Bravedemacbook-pro :npmModuleDemo brave$NPM version 1.0.1 v1.0.1 After execution, the version field in package.json is updated: "version": "1.0.1",Copy the code

2) NPM version <update_type> automatically changes the version

Update_type: // 1) patch: Patch V1.0.1 ->v1.0.2 Bravedemacbook-Pro :npmModuleDemo Brave $NPM version patch v1.0.2 // 2) minor: V1.0.2 ->v1.1.0 Bravedemacbook-Pro :npmModuleDemo $NPM Version Minor v1.1.0 // 3) Major: Bravedemacbook-pro :npmModuleDemo $NPM Version Major V2.0.0Copy the code

10, 8, undo the published NPM package

BravedeMacBook-Pro:npmModuleDemo brave$ 
	npm unpublish demo-publish-npm-module
	
npm ERR! Refusing to delete entire project.
npm ERR! Run with --force to do this.
npm ERR! npm unpublish [<@scope>/]<pkg>[@<version>]
Copy the code

As reported above, Bravedemacbook-pro :npmModuleDemo Brave $NPM unpublish demo-publish-npm-module --force NPM WARN using --force I sure hope you know what you are doing. - demo-publish-npm-moduleCopy the code

no_perms Private mode enable, 
only admin can publish this module: npmmoduledemo
Copy the code

Switch to the NPM official address: NPM config set registry at https://registry.npmjs.org/Copy the code

need auth You need to authorize this machine using `npm adduser`
Copy the code

A login session is required. Log in via NPM adduserCopy the code

npm ERR! code EAUTHUNKNOWN
npm ERR! Unable to authenticate, need: Basic
Copy the code

There is said on the net user name before adding ~ can login successfully added ~ can login really, but through the test and can not release a package, at least I am suchCopy the code

3) Similar or conflicting package names exist

Error message:

// Package name too similar to existing packages; try renaming your package to '@~bravewang/npmmoduledemo1' and publishing with 'npm publish --access=public' instead : Npmmoduledemo1 // Package name conflict You do not have permission to publish "nPMModuledemo ". Are You logged in as the correct user? : npmmoduledemoCopy the code

Solutions:

Change the package name to use an unused package nameCopy the code

4) The mailbox is not verified

Error message:

you must verify your email before publishing a new package: 
https://www.npmjs.com/email-edit : demo-publish-npm-module
Copy the code

Solutions:

The solution is to verify the mailbox, but this process does not bother me, because no matter I use 126 or QQ mailbox and open the activation link, it is not activatedCopy the code

Finally, I had no choice but to contact the customer service of NPM community:

You can see the reply from NPM customer service: QQ mailbox has been verified successfully, but still publish failed

NPM adduser: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang: bravewang Can refer to this process to try, may be able to solveCopy the code

Chapter XII. Conclusion

Didn't expect this to write so long, so today have no time to do related to expand the scaffold In short, we have to create, release, update, cancel the ability of NPM package Also be laid a foundation for subsequent work Later we will customize a vue - cli, and told the official enhanced template template to do a simple testCopy the code