Creating and distributing a small, beautiful NPM package is not as hard as you might think!

• How to make a beautiful, tiny NPM package and publish it
• By Jonathan Wood
• Translation from: The Gold Project
• This article is permalink: github.com/xitu/gold-m…
• Translator: snowyYU
• Proofreader: ElizurHz, Park-Ma

You won’t believe how easy it is to create and distribute a small, beautiful NPM package!

Photo by Chen Hu on Unsplash

If you have written many NPM modules, you can skip this section. If not, let’s look at the introduction first.

TL; DR

An NPM module only needs to contain a package.json file with the name and version properties.

Hey!

Look at you.

It’s like a little ignorant elephant.

You’re not an expert at making NPM packages, but you’d love to learn it.

All the elephants can stamp their feet and make bag after bag, and then you think:

“I can’t compete with them.”

Well, you can!

Stop doubting yourself.

Let’s go!

You’re not an elephant

It’s a metaphor.

Ever wonder what a baby elephant is called?

Of course you did. A young elephant is called a calf.

I believe you

Doubt that you exist.

This leads to a lot of people not being able to do cool stuff.

You don’t think you can do it, so you don’t do anything. But then you turn your head and look up to someone who has achieved so much.

That’s ironic.

So I’m going to show you one of the smallest possible NPM modules.

Soon there will be NPM modules flying out of your fingertips. Highly reusable code everywhere. There were no tricks — no complicated instructions.

Complex instruction

I promised there wouldn’t be…

. But I did.

It’s not so bad. You’ll forgive me one day.

Step 1: NPM account

You need an account number. That’s part of the process.

Sign up here.

Step 2: Log in

Have you registered an NPM account?

Yes, you have.

That’s great.

I also recommend using the command line/console, etc. I’m calling them terminals from now on. And you can see here the difference is very clear.

Open the terminal and type:

npm adduser
Copy the code

You can also use the following command:

npm login
Copy the code

Choose one of these two to stay with you until you die.

You’ll get a prompt that asks you to enter your username, password, and email. Fill them in the right places!

You’ll get hints like this:

Logged in as bamblehorse to scope @username on registry.npmjs.org/.

Terrific!

Start developing a package

First we need a folder to hold our code. Build one any way you like. I call my new bag Tiny because it’s really small. I provide some new terminal commands for those unfamiliar with the command line.

md tiny

In the new folder, we need the package.json file. If you’ve ever used Node.js — you’ve definitely seen this file. This is a JSON file that contains your project information and many configuration items. In this article, we only need to focus on two of them.

cd tiny && touch package.json

How small can it be?

It’s really small.

The tutorial for creating an NPM package, including the official documentation, asks you to enter certain fields in package.json. We tried to streamline our package as much as possible without compromising its ability to work and release. This is a type of TDD that we use on a very small NPM package.

Please note: I’m telling you this to show that not all NPM packages are complex. For the package we develop to contribute to the community, there are usually many other modules that are needed, which we’ll cover later.

Release: First try

To publish your NPM package, you need to execute the specified command: NPM publish.

So let’s try it in the folder we created with empty package.json:

npm publish
Copy the code

Oh oh!

Error:

npm ERR! file package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected end of JSON input while parsing near ' '
npm ERR! File: package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse
Copy the code

NPM doesn’t like to make so many mistakes.

That makes sense.

Release: The second struggle

Let’s first name our package in the package.json file:

{
"name": "@bamlehorse/tiny"
}
Copy the code

You may have noticed that I added my NPM user name to the beginning.

What’s the point of this?

By using @bamblehorse/tiny instead of Tiny, we will create a package under our username scope. This is called the Scoped Package. It allows us to use package names that are already used by other packages, for example, the Tiny package already exists in NPM.

You may have seen this naming method in some well-known packages, such as Angular from Google. They have several scoped packages, such as @angular/core and @angular/ HTTP.

Super cool, right?

We tried to release our package for the second time:

npm publish
Copy the code

The error message was much less this time – an improvement.

npm ERR! Package. json requires a valid "version" fieldCopy the code

Each NPM package requires a version so that developers can update the package version safely without breaking the rest of the code. The version system used by NPM is called SemVer, short for Semantic Versioning.

Don’t worry too much about not understanding the more complex version names, here’s their summary of the basic version names:

Given the version number major.minor. PATCH, the increment rule is as follows:

1. The new version produces an API that is incompatible with the earlier version, etc.

2. The MINOR version number change indicates that you are adding functionality in a backward compatible manner, and so on

3. The PATCH version number changes indicate that you have made backward compatibility bug fixes in the new version.

Additional tags representing the pre-release and build metadata are available as extensions to the major.minor.patch format.

semver.org

Release: Third try

We will define the version number of the package in our package.json: 1.0.0 — the first major version.

{
"name": "@bamblehorse/tiny"."version": "1.0.0"
}
Copy the code

Start Posting!

npm publish
Copy the code

Oh dear.

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages : @bamblehorse/tiny
Copy the code

Let me explain.

Scoped Packages are automatically published as private packages because they are not only useful for individual users like us, but also for companies to share code between projects. If we were to release such a package, that would be the end of our journey.

We simply change the instruction to tell NPM that we want to make this module available to everyone — don’t lock it in NPM’s vault. So we execute the following command:

npm publish --access=public
Copy the code

Boom!

+ @ bamblehorse/[email protected]Copy the code

We received a +, the name and version number of our package.

We’ve done it — we’ve walked into the NPM club.

I’m so excited.

You must be thrilled, too.

Cover sensitive information with friendly blue

Found no?

NPM love you yo

Really cute!

Version 1 is just lying there!

To reconstruct the

If we want to be serious developers and make our packages widely available, we need to show people our code and make them understand how to use our packages. Typically we do this by putting the code on a common platform and adding a description file.

We also need some code to do that.

To be honest.

We haven’t written any code yet.

GitHub is a great place to put your code. Build a new warehouse first.

The README!

I described it earlier by editing text in the README.

You don’t have to do that anymore.

It’s going to be interesting.

We’ll add some snazzy badges from Shields. IO to let people know we’re cool and professional.

To let people know our current package version:

npm (scoped)

The next badge is even more interesting. It means warning, because we don’t have any code yet.

We should write some code…

npm bundle size (minified)

Our brief introduction

License code

The name definitely refers to James Bond.

I actually forgot to add the license.

Code licensing is all about letting people know when to use your code. There are many options for you to choose from.

Each GitHub repository has a cool page called Insights, where you can view all kinds of statistics — including the project standards set by the community. I’m going to add my permission from there.

Community opinion

Then you click on this page:

Github gives you a brief introduction to each license

code

We still don’t have any code. It’s a little awkward.

Let’s add some code before we lose all credibility.

module.exports = function tiny(string) {
  if(typeof string ! = ="string") throw new TypeError("Tiny wants a string!");
  return string.replace(/\s/g, "");
};
Copy the code

It doesn’t work — but it’s a lot more comfortable

That’s it.

A simple method to remove whitespace from a string.

All NPM packages require an index.js file. This is the package entry file. As complexity increases, you can implement it in different ways.

But that’s good enough for us right now.

Have we reached our destination yet?

We’re close.

We should update our mini-package. json file and add some instructions to the readme.md file.

Otherwise, no one would know how to use our beautiful code.

package.json

{
  "name": "@bamblehorse/tiny"."version": "1.0.0"."description": "Removes all spaces from a string"."license": "MIT"."repository": "bamblehorse/tiny"."main": "index.js"."keywords": [
    "tiny"."npm"."package"."bamblehorse"]}Copy the code

Explain!

We added the following properties:

• Description: Description of the package
• Repository: good for GitHub addresses – so you can write username/repo in this format
• License: MIT certificate
• Main: The package entry file, located at the root of the folder
• Keywords: Add some keywords to make your package easier to search

readme.md

Very rich!

We have added instructions on how to install and use the package. Terrific!

If you want to optimize the readME format, just check out the popular packages in the open source community and use their formats to help you get started quickly.

complete

Let’s start releasing our awesome bags.

version

First, we use the NPM version command to upgrade the version of the next package.

This is a major release, so we type:

npm version major
Copy the code

It will print:

v2.0.0
Copy the code

Release!

Let’s run our favorite command:

npm publish
Copy the code

Complete:

+ @ bamblehorse/[email protected]Copy the code

A cool thing

Package Phobia can provide a great summary of your Package. You can also view the files inside the package on websites such as Unpkg.

Thank you for reading

We’ve just had a wonderful trip. I hope you will enjoy it as much as I do.

Please let me know what you think!

Give the package we just created a star:

uGithub.com/Bamblehorse…

“An elephant half submerged in water.” Photo by Jakob Owens from Unsplash

Follow me on Twitter, Medium or GitHub.

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

---

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.