Author: Lu Stuci

1. Release an NPM package

1.1 the initialization

The NPM package is initialized using the NPM init command or scaffolding

NPM init ------------------ package name: (npm-demo) Version: (1.0.0) Description: A plus method entry point: (index.js) app.js test command: npm run test git repository: https://git.xxx.com/base-fe/xxx/npm-demo keywords: npm author: olina license: (ISC)Copy the code

1.2 package development

Includes the package function development and debugging process

1.2.1 Function development

Complete the function realization of the package

1.2.2 debugging

How to quickly validate and debug changes during development

(1) Continuously release beta versions ✖️
  • Excellent: Upgrade package version, multiple people can use
  • Lack: repetitive and tedious
(2) Install ✖️ according to the relative path
cd ~/Desktop/demo/npm-demo
npm install /Users/olinalu/ke/ke-components/packages/ke-form
Copy the code
  • Excellent: Easy to operate
  • Missing: Changes during debugging need to be repeatedly installed
(3) Use the soft chain ✔️
CD ~/Desktop/demo/ NPM -demo/node_modules # CD to the project directory node_modules ln -s /Users/olinalu/ke/ KE-Components /packages/ KE-form @ke/ke-form # link the package through ln -s <package path> <package name>Copy the code

Delete the soft chain

cd ~/Desktop/demo/npm-demo/node_modules
rm -rf @ke/ke-form
Copy the code
  • Excellent: The changes on both sides are synchronized
  • Missing: Different operating systems have different syntax
(4) NPM link ✔️
CD ~/Desktop/demo/ NPM -demo # CD to project directory NPM link@ke /ke-form NPM link <package name> link the package to the current directoryCopy the code

Establish a link as follows

/Users/olinalu/Desktop/demo/npm-demo/node_modules/@ke/ke-form -> /usr/local/lib/node_modules/@ke/ke-form -> /Users/olinalu/ke/ke-components/packages/ke-form
Copy the code

Write the package under global node_modules

Simplified operation

NPM link /Users/olinalu/ke/ ke-Components/Packages /ke-form # NPM link <package Path > link the package to the current directoryCopy the code

In this way, all changes in Packages/KE-form will be synchronized to ~/Desktop/demo/npm-demo/node_modules/@ke/ke-form

tips

  • The above approach does not write the NPM package into package.json
  • In Webpack4, the resolve.symlinks attribute defaults to true. In NPM link, the module fails to resolve, and you need to manually change this attribute to False

Uncaught (in promise) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Remove the link

Run the NPM unlink @ke/ KE-form command in the project

1.3 release

The package publishing process is accomplished through the following process

1.3.1 Publishing content management

  • Whitelist: Read files properties in package.json (default includes package.json, readme. md, LICENSE files)
"files": ["src", "app.js"]
Copy the code
  • Blacklist: read.gitignore or.npmignore and ignore the corresponding file (.npmignore >.gitignore)..npmignore does not overwrite the root directory field in files, but can overwrite subdirectories
  • View the files to be published for the current package:npx npm-packlist

1.3.2 Using NPM Version to control the version

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
Copy the code

X.Y.Z-beta

An updated version instruction meaning
X.Y.Z npm version major Destructive modification
X.Y.Z npm version minor Compatibility changes
X.Y.Z npm version patch Update the patch
X.Y.Z-beta npm version prerelease Release test packages

1.3.3 package release

(1) Source Management (once)

Gets the current source: NPM get registry modify source: NPM config set registry=http://registry.npmjs.org

(2) Account and permission application (once)

NPM public image: Account registration, mailbox activation, local NPM login, and successful execution of NPM whoami

(3) Publish (every time)
  • NPM publish publishes the latest official package
  • npm publish –tag <tag>Release test packages
(4) Delete package (72h time limit)
  • Delete a package version:npm unpublish [<@scope>]<pkg>@<version>
  • Delete the entire package:npm unpublish [<@scope>]<pkg> --force

2. Install

Package version 2.1

2.1.1 npm ls

All installed packages, version numbers, and their dependencies are printed in a tree structure. The dependencies are logical dependencies between packages, not directory structures in node_modules

2.1.2 npm outdated

Check whether the version is the latest

Latest: Latest official version of the current package. Red: a new version can be updated in the current version. Yellow: the latest version in the current version

2.1.3 NPM update [-g] [< PKG >…

  • Update dependencies in global/project to the latest version of the current semantics
  • Updates all packages in the current environment when no package name is specified
version Installation instructions meaning
X.Y.Z npm install packageName -D/S –save-exact Exact version number
^X.Y.Z npm install packageName Install >=X.Y.X <(X+1).0.0
~X.Y.Z Modify package.json manually Install the >=X.Y.X < X.(Y+1).0 version

2.1.4 npm install

  • No arguments: Install all packages in package.json
  • npm install <folder>: installs the package in the corresponding directory in the current project as a symbolic link
  • NPM install [<@scope>]

    : Installs specific packages

2.2 Flattening of packages

2.2.1 npm install

Package structure: A {B, C}, {C} B, C} {D + A - B | ` - C | ` - No ` D - C ` - A + Yes - B + C + D - DCopy the code
Package structure: A {B, C}, B @ 1} {C, D, C {2} D @ + A + - B - C ` D @ + - 2 D @ 1Copy the code

The generated tree structure may be different depending on the installation sequence

2.2.2 npm dedupe

Find the tree structure of the local package and simplify the tree structure for better shared dependencies between packages. When dependency redundancy occurs between packages, NPM dedupe can be used to recalculate. The result is as follows:

before

A + b - < - depends on [email protected] | ` - [email protected] ` d < - depends on c @ ~ 1.0.9 ` - [email protected]Copy the code

after

A +-- b +-- d '-- [email protected]Copy the code

More…

Package. json Indicates the meanings of each field

name

Identifies the package name, which is required in the distribution package

version

Identifies the package version, which is required in the distribution package

main

Project entry file

scripts

Execute commands based on different lifecycle hooks

files(.npmignore)

Publish whitelist: Contains package.json, readme. md, and LICENSE files by default

dependencies

Required for project launch or release of NPM package

devDependencies

Required for project development (Babel, Webpack, etc.)

peerDependencies

Prompts the host environment to install the packages that the NPM package depends on as specified in peerDependencies. NPM 3.x ~ 6.x, warning to install, NPM 7.x, the default installation dependency package (to reduce the conflict between the NPM package and the host environment dependency version, try not to lock this version)

Tips

In a business project, dependencies and devDependencies have no essential difference, but only a pure specification function. When implementing NPM install, the module under both dependencies will be downloaded. When an NPM package is distributed, the Dependencies dependency in the package is downloaded together when the package is installed, whereas the devDependencies dependency is not.

Refer to the article

  • NPM official documentation
  • Module debugging tips you didn’t know about
  • Front-end engineering (5) : All the NPM knowledge you need is here
  • Details that are overlooked in NPM dependency management
  • webpack-resolve.symlinks