This feels a little bit repetitive, but it’s in the outline, and I wrote it because I thought the reader would be able to follow the series step by step. If you have a front-end development environment and experience with NPM, you may want to skip this article.

Environment configuration

For modern front-end development, all you need is a computer environment with Node & NPM installed

You will also need a development IDE, and VS Code is recommended

terminal

There are a lot of good terminal software out there, but here we use the built-in terminal.

  • For Windows, use Command Prompt or PowerShell
  • For macOS, use the built-in Terminal application, Terminal

Node & npm

Almost all tools for modern JavaScript projects are based on Node.js. The download page has a pre-built installation package for all platforms. We recommend choosing the LTS version to ensure best compatibility.

The Node bundle installs NPM, a JavaScript package manager.

To verify the installation, open a new terminal window and run:

$ node --version
$ npm --version
Copy the code

When installing global modules using NPM on macOS, you often encounter permissions problems. If you encounter EACCES errors, please refer to resolving permissions errors.

Note that I am currently using v16.13.1. If you are following this series, step by Step, it is best to install the same version of Node as I did, as this will reduce many unexpected problems.

Git

Since we will be hosting the repository on GitHub, we will use Git to submit and manage our projects. Git is a very efficient and popular version control software.

Git usually comes with a Git host, such as GitHub we’ll be using, in which case additional Settings are required. Follow the tutorial in the Git host documentation to set up Git:

  • GitHub: Set up Git
  • GitLab: Installing Git
  • Bitbucket: Install Git

Otherwise, follow the official installation instructions. You can download the command line utility from the Download page.

To verify the installation, open a new terminal window and run:

$ git --version
Copy the code

Git GUI

Git is a command line utility, but there are many GUI clients available. GitHub Desktop is recommended when using GitHub. For other Git hosts, you are advised to install Sourcetree.

The GitHub plugin and GitLens plugin can be installed using VS Code

label

name

Start by giving your framework a nice, catchy name. For example, I chose a random malita here, which means “small frame”, which happens to include alita. (Dead deny is the opportunity to promote)

Set name, whether can search on the NPM has been in existence of the same name, you can directly visit https://www.npmjs.com/package/ you get the package name, if I take that malita. If the page says 404, you can probably use that name. If a package with the same name already exists, you can consider changing it to a different package name. If you really like this name, you can create a new component on top of NPM, like alita, and use a package name like @alita/malita.

Creating a Git repository

, of course, this step is not necessary, but you’d better use a git repository to manage your development progress, at least one good, you can see the changes you changed what files, when you meet “why has been running well, suddenly not” questions such as, you can put your code to it can correct operation time node.

First, we will create a new project on GitHub, organize it and make it public or not. You can choose the Repository name you chose. Initialize this Repository with: do not select either, because we need a new full blank repository.

Click the New button and you will be taken to the project management page

The page will display new project command, for git command unfamiliar friends, very friendly.

Synchronize the repository locally

In your working directory, perform the git clone you git – url, such as git clone https://github.com/xiaohuoni/malita.git, will create a new folder, the folder name for the above you pick up a package name, Such as Malita and then open the empty folder with VS Code. Open VS Code terminal (Click Terminal – New Terminal in the taskbar).

Publish your own NPM package

Initialize the NPM package

NPM init -y, -y means yes to all the questions that the NPM CLI asks us.

➜ malita git: (master) NPM init - y demonstrate the to/Users/congxiaochen/Documents/malita/package. The json: {"name": "malita"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git"."url": "git+https://github.com/xiaohuoni/malita.git"
  },
  "keywords": []."author": ""."license": "ISC"."bugs": {
    "url": "https://github.com/xiaohuoni/malita/issues"
  },
  "homepage": "https://github.com/xiaohuoni/malita#readme"
}
Copy the code

Git init has the advantage of automatically generating repository information, so that when someone needs to use your package, they can find your repository location.

In the above information, modify the content you want to modify, such as Version, keywords, and Author. Here I changed the version number to 0.0.1.

Then execute NPM login as prompted to login, and then execute NPM publish to push your package to NPM.

➜ malita git:(master) qualify NPM publish NPM notice NPM notice 📦 [email protected] NPM notice === Tarball Contents === NPM notice  504B package.json npm notice === Tarball Details === npm notice name: malita npm notice version: 0.0.1 NPM notice filename: malita-0.0.1. TGZ NPM notice Package Size: 335 B NPM notice Unpacked size: 504 B npm notice shasum: dbc8d0364b3c412eb611622615a301c008bddb98 npm notice integrity: sha512-ves43De3fF12v[...] Hm7yv +IGRy1Uw== NPM notice Total Files: 1 NPM notice + [email protected]Copy the code

Congratulations, you published a package of your own on NPM, you can share your work by sharing it with other friends.

It is important to note that, if your organization is to use the name of packages that once the publish (NPM contract orders, don’t know if it doesn’t matter, the next), the need in the package path package. The increase in json “publishConfig” : {” access “: “Public”}, config.

If you publish at NPM, you are prompted with 403 permission related issues. There are two situations, one is you don’t have the network status, although tip 403 but actually push the success, you can access the page https://www.npmjs.com/package/malita and confirm if still show 404, that this is a private package of others, You need to change the name or use the organization name package.

conclusion

That’s all for today, thanks for watching, and if you have any questions, feel free to interact with me in the comments.