If you are responsible for the front-end infrastructure, it is not uncommon to release various feature/plug-in packages, so it is necessary to be familiar with the distribution and management of NPM packages, hence this summary article. This article summarizes on the one hand, on the one hand to contribute to the community out of the box NPM development, compilation, publishing, debugging template, hope to help students in need.

NPM SDK template repository for: github.com/fengshi123/… Blog github address: github.com/fengshi123/… , a summary of all the author’s blog, welcome to follow and star ~

Initialize the NPM package

1.1. Initialize NPM project

To initialize an NPM package project, run the following command:

npm init --save
Copy the code

1.2. Package permission management

In many cases, you are not the only one managing a project package. In this case, you need to give other students the permission to publish the project. Related commands are as follows:

#View the module owner. Demo indicates the module name
$ npm owner ls demo

#Add a publisher where XXX is the NPM account of the student to be added
$ npm owner add xxx demo

#Delete a publisher
$ npm owner rm xxx demo
Copy the code

1.3 release

1.3.1 release stable version

Update the version number of the following options (major | minor | patch | premajor | preminor | prepatch | prerelease), pay attention to the project of git status must be clear, to use these commands.

#Major the major version number and is not backward compatible with 1.0.0 -> 2.0.0
$ npm version major

#Minor Indicates a minor version with new features and backward compatibility with 1.0.0 -> 1.1.0
$ npm version minor

#Patch revision number, fix some problems, optimize, etc. 1.0.0 -> 1.0.1
$ npm version patch

#Premajor premajor 1.0.0 -> 2.0.0-0
$ npm version premajor

#Preminor Minor version 1.0.0 -> 1.0-0
$ npm version major

#Prepatch Pre-revision version 1.0.0 -> 1.0.1-0
$ npm version major

#Prerelease Pre-release version 1.0.0- > 1.0.0-0
$ npm version major
Copy the code

After the version number is updated, we can release the version

$ npm publish
Copy the code

1.3.2 pre-release

In many cases, new changes cannot be released directly to the stable version (stable version means the latest version can be downloaded by using NPM install demo), so a “pre-release” can be released without affecting the stable version.

#Release a prelease version, tag=beta
$ npm version prerelease
$ npm publish --tag beta
Copy the code

For example, if the original version is 1.0.1, then the previous version is 1.0.1-0. Users can install NPM install demo@beta or NPM install [email protected]. The user still installs version 1.0.1 through NPM install Demo.

1.3.3. Set the Beta version to the stable version

#You can start by looking at all current recent releases, including prerelease and stable releases
$ npm dist-tag ls

#Set version 1.0.1-1 to stable version
$NPM dist- Tag add [email protected] latest
Copy the code

At this point, the latest stable version is 1.0.1-1. Users can install this version directly by using NPM install Demo.

1.3.4 remove the beta version

#Remove the beta version
$ tnpm dist-tag rm demo beta
Copy the code

1.3.5. Push tag to Git remote repository

#After publishing the corresponding version, you can run the following command to push the version number to the remote repository, where XXX is the corresponding branch
$ git push origin xxx --tags
Copy the code

1.4. View the version information

You can view module details at NPM Info.

$ npm info
Copy the code

Use typescript

2.1. Install typescript as a development dependency

$ npm i typescript -D
Copy the code

2.2. Add the configuration file tsconfig.json

Create tsconfig.json in the root directory. For details about the configuration item, see the official TS document

{" version ":" 1.8.0 comes with ", "compilerOptions" : {" outDir ":" build/compiled as ", "lib" : [" es6 "], "target" : "es5", "the module" : "commonjs", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "noImplicitAny": true, "declaration": true }, "exclude": [ "build", "node_modules" ] }Copy the code

2.3. Install @types/node

Install @types/node to give type hints to the core node package

$ npm i @types/node -D
Copy the code

2.4. Create an import file

Create a new SRC directory in the root directory to store all TypeScript source files, and then create index.ts under SRC as an entry file

// src/index.ts console.log('hello npm-sdk! ');Copy the code

2.5. Install ts-node-dev

In order to execute directly and listen for changes to ts files during development, install ts-node-dev

$ npm i ts-node-dev -D
Copy the code

Define a startup script in package.json

"scripts": {
    "start": "ts-node-dev --respawn --transpile-only src/index.ts"
}
Copy the code

This allows us to compile in real time, as shown below ​

3. Use ESLint validation

3.1. Install ESLint

$ npm i eslint -D
Copy the code

3.2. Eslint initialization

$ ./node_modules/.bin/eslint --init
Copy the code

According to the interactive command prompt, the corresponding configuration file is shown as follows, which can be configured according to the code style of the team

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}
Copy the code

3.3. Add the ignore file. Eslintignore

node_modules/
Copy the code

3.4 Script command configuration

You can configure the corresponding verification and repair commands in package.json, as shown below

  "scripts": {
    "lint": "eslint --ext .ts .",
    "lint:fix":"eslint --fix --ext .ts ."
  },
Copy the code

3.5. Submit verification

Intercept validation for code submission using commitLint and Husky tools is installed as follows

$ npm i @commitlint/cli @commitlint/config-conventional husky lint-staged --D
Copy the code

This configuration is done in package.json, and when committing code, an esLint error will be reported if there is an ESLint error in the code

  "husky":{
    "hooks":{
      "pre-commit":"lint-staged",
      "commit-msg":"commitlint -e $HUSKY_GIT_PARAMS"
    },
    "lint-staged":{
      ".ts":[
        "eslint --fix"
      ]
    },
    "commitlint":{
      "extends":[
        "@commitlint/config-conventional"
      ]
    }
  },
Copy the code

Four, compile,

We can add the corresponding typescript compilation command, as shown below

"scripts": {
  "build:cjs": "tsc --outDir lib",
  "build:es": "tsc -m esNext --outDir esm",
  "build": "rd /s /q lib esm && npm run build:cjs && npm run build:es",
},
Copy the code

Configure the corresponding entry address. The difference between module and main is that module is used mostly for tree shaking.

  "main": "lib/index.js",
  "module": "esm/index.js",
Copy the code

5. Local debugging

After installing the published online package in our package directory, you can run the following command to associate the corresponding package installed under the current project node_modules to the local global NPM directory node_modules

$NPM link [email protected]
Copy the code

Run the following commandThen associate them in the corresponding NPM SDK directory

$ npm linkD:\ NVM \ NPM \node_modules\npm-sdk -> F:\all_project\npm-sdkCopy the code

Here, through the association of the above two steps, associate the SDK package used in the project with the corresponding development directory of the SDK package, so that we can debug the SDK package locally.

Six, summarized

This article demonstrates how to build and publish an NPM package from the NPM SDK template repository: github.com/fengshi123/… , students who need can clone directly for use. Blog github address: github.com/fengshi123/… , a summary of all the author’s blog, welcome to follow and star ~

​

​

​

​

​