I will take notes on this year’s front-end engineering. Read them frequently.

Welcome you to give bo a thumbs up, attention.

Let’s cut the crap and do it.

0. Create a package folder

mkdir my-first-npm-package && cd my-first-npm-package
Copy the code

1. Initialize a package.json

NPM init generates a package.json file that looks like this by filling in a list of questions:

> NPM init package name: (my-first-npm-package) version: (1.0.0) 1.0.0 description: my first NPM package entry point: (index.js) test command: git repository: keywords: author: [email protected] license: (ISC) About to write to /Users/chokingwin/code/frontend/my-first-npm-package/package.json: { "name": "My-first-npm-package ", "version": "1.0.0", "description": "my first NPM package", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "[email protected]", "license": "ISC" } Is this OK? (yes) yesCopy the code

There are several common combinations worth mentioning.

If you want to skip the heavy questions, you can include -y or –yes, and the resulting package.json file will use the NPM default configuration.

> npm init -y
> npm init --yes
Copy the code

The default configuration can be configured using the following command:

> npm set init.author.email "[email protected]"
> npm set init.author.name "example_user"
> npm set init.license "MIT"
Copy the code

In addition, because of the uniqueness of the package name, the my-first-nPm-package name we use this time is probably already used (first come, first served 🤣). To avoid hitting the wall, we also use the Scope flag to create package.json.

> npm init --scope=@chokingwin -y
Copy the code

This is the equivalent of setting up a namespace and telling the NPM repository that this is chokingwin’s my-first-nPm-package, don’t get confused.

2. Write down the core logic of your package in the entry file

Let’s look at the package.json generated by NPM init –scope= @chokingwin-y.

{" name ":" @ chokingwin/my - first - NPM - package ", "version" : "1.0.0", "description" : ""," main ":". The main js ", "scripts" : { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }Copy the code

Pay attention to the main field, which indicates which file is the entry file for the package.

In this case, we need to create a new main.js file in the root directory.

Since it’s all package entry files, let’s write our package logic in this file. 😁

exports.printMsg = function () {
    console.log("This is a message from the @chokingwin/my-first-npm-package package.");
}
Copy the code

Simply export a printMsg method.

3. Create a test directory and try it out to see if there are any problems

At this point, we need to see if our @chokingwin/my-first-npm-package printMsg method is used correctly.

Other new folder again test – directory, we use NPM I/Users/chokingwin/code/frontend/my – first – NPM – package to install this package.

Note: this package has not been published, the package name needs to use your local package folder in the absolute path oh. Corresponding to me is/Users/chokingwin/code/frontend/my – first – NPM – package

After the installation is successful, you should see something like the following on the command line:

> npm i /Users/chokingwin/code/frontend/my-first-npm-package
npm WARN saveError ENOENT: no such file or directory, open '/Users/chokingwin/code/frontend/test-directory/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/chokingwin/code/frontend/test-directory/package.json'
npm WARN test-directory No description
npm WARN test-directory No repository field.
npm WARN test-directory No README data
npm WARN test-directory No license field.

+ @chokingwin/[email protected]
added 1 package in 0.245s
Copy the code

After the package is successfully installed, we’ll write a test.js file to introduce the printMsg method.

var { printMsg } = require('@chokingwin/my-first-npm-package');

printMsg();
Copy the code

Execute and test the effect.

> node test.js 
This is a message from the @chokingwin/my-first-npm-package package.
Copy the code

OK, that’s it. It looks like there’s nothing wrong.

4. Release

The last step is to publish our package to the NPM repository, if you have registered your account of course.

Run NPM whoami to check if NPM has been logged in.

> npm whoami
npm ERR! code ENEEDAUTH
npm ERR! need auth This command requires you to be logged in.
npm ERR! need auth You need to authorize this machine using `npm adduser`
Copy the code

Cue ENEEDAUTH, obviously we need to log in.

Run NPM adduser and enter your Username, Password, and Email

> npm adduser --registry=https://registry.npmjs.org --scope=@chokingwin --always-auth

> npm adduser --registry=https://registry.npmjs.org --scope=@chokingwin --always-auth
Username: chokingwin
Password: 
Email: (this IS public) [email protected]
Logged in as chokingwin to scope @chokingwin on https://registry.npmjs.org/.
Copy the code

Once logged in, use NPM Publish to publish.

Considering that our package also uses scope, we need to use NPM publish –access public.

> npm publish --access public
npm notice 
npm notice 📦  @chokingwin/[email protected]
npm notice === Tarball Contents === 
npm notice 123B main.js     
npm notice 245B package.json
npm notice === Tarball Details === 
npm notice name:          @chokingwin/my-first-npm-package        
npm notice version:       1.0.0                                   
npm notice package size:  368 B                                   
npm notice unpacked size: 368 B                                   
npm notice total files:   2                                       
npm notice 
+ @chokingwin/[email protected]
Copy the code

If you see the above information, our package has been published.

Go back to nPMjs.com to refresh and see the package you just released.

Nice Job, that’s all for today. Like tiezi, give Bo praise, attention ah. 🤡

reference

creating-and-publishing-unscoped-public-packages