This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Write in front:

  • Personal front-end website: Zhangqiang.hk.cn
  • Welcome to join the blogger front-end learning QQ exchange group: : 706947563, focus on front-end development, learning and progress together!

0 foreword

NPM install ANTd –save or NPM I element-ui-s when we write a front-end project using the ANTD or Element library. These authors post the source package on the NPM website. We can install them directly through NPM, and then use them directly in the program, so that the development efficiency has been greatly improved. Today we are going to do is how to publish a package on NPM, and then reference it in the program, learn to later we can write some can improve the development efficiency of the package to share with partners oh ~

1. Register an account on NPM official website

NPM (nPMjs.com)

2. Prepare your own kit

For example, the following is the package I want to send, I will usually development often used method function integration into a package, and then released through NPM, so that you can share with the development of front-end partners to use ~ their own use is also very convenient.

As a test for package distribution, you can write a small number of methods, such as the following code, so that the package contains only one method:

export const add = (a: number, b: number) => {
​
  return a + b + 1;
}
Copy the code

2.1 configuration package. Josn

I’m not finished writing this blog, I’m going to have dinner, and I’ll finish it next time

2.2 TS translation js

If written in JS, you can ignore section 2.2. If you write in TS, you should translate it into JS format and send the package.

3 The package starts to be sent

3.1 Identify the source of the NPM

3.2 Logging In to your NPM account

3.3 publish a package

4 Use self-published packages

4.1 Local Test (Test before release)

4.2 Test after release

The logic here is that we publish the package to the NPM website, and I install the reference directly through another front-end project and test it.

Steps for,

NPM install XXX import {} from 'XXX ';Copy the code