tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【 npm 】簡単な npm パッケージを作る

npm..gulpの導入の時などにお世話になりましたが、
実際、あまり深く理解していないまま利用している私です(笑)。。。
今回はnpmのパッケージを自作して、パッケージについてより深く理解していきたいと思います。
とは言っても、Hello World を返すだけのパッケージなのですが。

okinawanpizza.hatenablog.com

目次

1. npm.jsにアカウントを作る
2. tarminalでアカウントにログイン
3. git hubにリポジトリを作成して、ローカルにクローンする
4. package.jsonを作成
5. index.jsを作成(パッケージの中身を書く)
6. npm.jsにアップロード

作り方

1. npm.jsにアカウントを作る

npm.js というアカウントとパッケージを登録できるサイトがあります。
https://www.npmjs.com/
こちらにアクセスして、アカウントを作成しましょう。
f:id:okinawanpizza:20200123160838p:plain

登録したメールアドレスにアカウント認証メールが届きますので、
そこからnpm.jsにログインしてください。
f:id:okinawanpizza:20200123165428p:plain そうしないと、パッケージを登録する際にターミナルでエラーが出るので気をつけて!!

2. tarminalでnpm.jsアカウントにログイン

下のコードを入力します。

npm set init.author.name "npm.jsのユーザー名"
npm set init.author.email "npm.jsで登録したメールアドレス"
npm set init.author.url "運営しているブログのURL"

.npmrc に下記の三行が記載されていることを確認します。

init.author.name=***
init.author.email=***@***.com
init.author.url=***

ターミナルでnpm adduserを入力します。
するとターミナルからユーザー名、メールアドレス、パスワードを要求されます。

npm adduser   
Username:
Password: 
Email: (this IS public) 

3. git hubにリポジトリを作成して、クローン

リポジトリを作成します。
そのあとローカルにクローンします。
「空のリポジトリがクローンされた」と表示が出ます。

~/d/user ❯❯❯ git clone git@github.com:user/konnichiwa.git
Cloning into 'konnichiwa'...
warning: You appear to have cloned an empty repository.

4. package.jsonを作成

package.jsonを作ります。コマンドラインnpm initと入力すると自動的に作成されます。
アンケート式で入力する部分がありますが、今回はカットします。

~/d/t/konnichiwa ❯❯❯ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.


Press ^C at any time to quit.
package name: (konnichiwa) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: (https://github.com/tamaki88888888/konnichiwa.git) 
keywords: konnichiwa
license: (ISC) 
About to write to /Users/koutamakin/development/tamaki/konnichiwa/package.json:

// 下記のようなpackage.jsonを作りますがよろしいでしょうか??
{
  "name": "konnichiwa",
  "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/user/konnichiwa.git"
  },
  "keywords": [
    "konnichiwa"
  ],
  "author": "username <****@****.com> (https://okinawanpizza.hatenablog.com/)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/user/konnichiwa/issues"
  },
  "homepage": "https://github.com/user/konnichiwa#readme"
}


Is this OK? (yes) 

5. index.jsを作成(パッケージの中身を書く)

console.log("Konnichiwa World");
//以上!

6. npm.jsにアップロード

npm publishでパッケージを作成します。
以上で終了となります。

~/d/t/konnichiwa ❯❯❯ npm publish                                                      
npm notice 
npm notice 📦  konnichiwa@1.0.0
npm notice === Tarball Contents === 
npm notice 57B  index.js    
npm notice 577B package.json
npm notice === Tarball Details === 
npm notice name:          konnichiwa                              
npm notice version:       1.0.0                                   
npm notice package size:  468 B                                   
npm notice unpacked size: 634 B                                   
npm notice shasum:        9a31f2d488187a1ceeac50b7915d8707d86898c1
npm notice integrity:     sha512-ZFSHor7QeNH1+[...]WqY0BJ0k5v6kw==
npm notice total files:   2                                       
npm notice 
+ konnichiwa@1.0.0

エラー??

~/d/t/konnichiwa ❯❯❯ npm publish
npm notice 
npm notice 📦  konnichiwa@1.0.0
npm notice === Tarball Contents === 
npm notice 57B  index.js    
npm notice 577B package.json
npm notice === Tarball Details === 
npm notice name:          konnichiwa                              
npm notice version:       1.0.0                                   
npm notice package size:  468 B                                   
npm notice unpacked size: 634 B                                   
npm notice shasum:        9a31f2d488187a1ceeac50b7915d8707d86898c1
npm notice integrity:     sha512-ZFSHor7QeNH1+[...]WqY0BJ0k5v6kw==
npm notice total files:   2                                       
npm notice 
npm ERR! code E403
npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/konnichiwa - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/koutamakin/.npm/_logs/2020-01-23T05_41_22_723Z-debug.log

どうやら、メールアドレスの認証ができていなかったようです。

f:id:okinawanpizza:20200123165606p:plain
メールアドレスの認証が完了していません!!!!というメッセージです

完了!

npm install konnichiwaで自作パッケージが取れるようになっています。

~/d/t/practis ❯❯❯ npm install konnichiwa

+ konnichiwa@1.0.0
added 1 package from 1 contributor in 1.356s

という風になります。
パッケージって、企業が作っているイメージでした。ですがこんなに敷居が低くて簡単なのであれば
一個人が作っているものもたくさんあるのかななんて思いました。
私たちは先人の知恵をタダで使うことができるのですね笑

おしまい