<pre><code class=language-sh>npm info &lt;package-name&gt; versions
<span class="hljs-comment"># [ '0.1.0',</span>
<span class="hljs-comment">#   '0.1.1',</span>
<span class="hljs-comment">#   '0.1.2',</span>
<span class="hljs-comment">#   '0.1.3',</span>
<span class="hljs-comment">#   '0.1.4',</span>
<span class="hljs-comment">#   '0.2.0-alpha.0',</span>
<span class="hljs-comment">#   '0.2.2-alpha.0',</span>
<span class="hljs-comment">#   '0.2.3-alpha.0' ]</span></code></pre>

あるパッケージの存在するバージョン一覧の取得

<p>パッケージをインストールする時に<code>package@version</code>という風に指定することで、特定のバージョン（や範囲）に固定することができます。</p><p>ちなみに例には<code>react</code>パッケージを用い、これを書いている時点の<code>react</code>パッケージの最新は<code>16.8.3</code>です。</p><div class=n-md_h3-box><a href=#package.json_のバージョン指定方法+不等号 aria-label=不等号のアンカー class=n-md_h3-anchor></a><h3 id=package.json_のバージョン指定方法+不等号 class=n-md_h3-heading>不等号</h3></div><h4 id="大なり &gt;">大なり &gt;</h4><pre><code class=language-sh>yarn add <span class="hljs-string">'react@&gt;15'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"&gt;16"</span>
  }
}</code></pre><p>上記のようにするとバージョン<code>16</code>より大きいもの、つまり<code>17.x.x</code>や<code>18.x.x</code>の中で１番最新のものという意味になります。<code>&gt;16</code>とすると、まだパッケージが存在していないので<code>ETARGET</code>エラーになります。（<code>yarn</code>だと対話モードでのバージョン選択になります）</p><h4 id="大なりイコール &gt;=">大なりイコール &gt;=</h4><pre><code class=language-sh>yarn add <span class="hljs-string">'react@=&gt;16'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"&gt;16"</span>
  }
}</code></pre><p>先程のを<code>=&gt;</code>に変更すると<code>16</code>以上という意味になり<code>16.x.x</code>系も含まれるのでエラーにならなくなります。</p><h4 id="小なり &lt;">小なり &lt;</h4><pre><code class=language-sh>yarn add <span class="hljs-string">'react@&lt;16'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"&lt;16"</span>
  }
}</code></pre><p>向きを反対にすると逆の意味になります。<code>&lt;</code>はそれより小さいバージョン、つまり上記の場合は<code>15.x.x</code>や<code>14.x.x</code>の１番最新バージョンが対象になります。</p><h4 id="小なりイコール &lt;">小なりイコール &lt;</h4><pre><code class=language-sh>yarn add <span class="hljs-string">'react@&lt;16'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"&lt;=16"</span>
  }
}</code></pre><p>これは<code>16</code>以下なので、<code>16.x.x</code>や<code>15.x.x</code>や<code>14.x.x</code>の中で最新という意味になります。これを書いている時点では<code>16.8.3</code>ということになります。</p><div class=n-md_h3-box><a href=#package.json_のバージョン指定方法+記号 aria-label=記号のアンカー class=n-md_h3-anchor></a><h3 id=package.json_のバージョン指定方法+記号 class=n-md_h3-heading>記号</h3></div><h4 id="チルダ ~">チルダ ~</h4><pre><code class=language-sh>yarn add <span class="hljs-string">'react@~16.8.0'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"~16.8.0"</span>
  }
}</code></pre><p>そのマイナーバージョン(2番目の数値）の最新という意味になります。つまり上記の場合は最新が<code>16.8.3</code>なので<code>16.8.3</code>, <code>16.8.2</code>, <code>16.8.1</code>, <code>16.8.0</code> の中で最新という意味になるので<code>16.8.3</code>がインストールされます。</p><h4 id="キャレット ^">キャレット ^</h4><pre><code class=language-sh>yarn add <span class="hljs-string">'react@^16.0.0'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"^16.0.0"</span>
  }
}</code></pre><p>そのグローバルバージョン（1番目の数値）での最新という意味になります。これは<code>@version</code>を指定しないと自動で<code>@^latest-version</code>となります。これも<code>16.8.3</code>, <code>16.8.2</code>, <code>16.8.1</code>, <code>16.8.0</code>, <code>16.7.0</code>, ..., <code>16.0.0</code>という意味になるので<code>16.8.3</code>がインストールされます。</p><h4 id="エックス x">エックス x</h4><pre><code class=language-sh>yarn add <span class="hljs-string">'react@16.8.x'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"16.8.x"</span>
  }
}</code></pre><p>その<code>x</code>に1番大きな数値が入ったバージョンがインストール対象になります。これを書いている時点では<code>16.8.3</code>が最新なので、<code>x</code>には<code>3</code>が入ります。</p><div class=n-md_h3-box><a href=#package.json_のバージョン指定方法+記号なし aria-label=記号なしのアンカー class=n-md_h3-anchor></a><h3 id=package.json_のバージョン指定方法+記号なし class=n-md_h3-heading>記号なし</h3></div><pre><code class=language-sh>yarn add <span class="hljs-string">'react@16.8.3'</span></code></pre><pre><code class=language-json>{
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"16.8.3"</span>
  }
}</code></pre><p>ただバージョンを指定するとそのバージョン固定になり、必ず指定したバージョンのものがインストールされます。。</p>

package.json のバージョン指定方法

<p>僕は<a href=https://github.com/sindresorhus/np>sindresorhus/np</a>を使った方法が簡単だと思うのでこれを使います。</p><div class=n-md_h3-box><a href=#パッケージを公開する+np_を使う aria-label="np を使うのアンカー" class=n-md_h3-anchor></a><h3 id=パッケージを公開する+np_を使う class=n-md_h3-heading>np を使う</h3></div><p>これ使うと、</p><ol><li>依存のクリーンインストール</li><li>テストの実行</li><li>テストが成功したらバージョンタグを振って公開</li></ol><p>というようなことを自動でやってくれます。</p><p>これは以下のようにインストールできます。</p><pre><code class=language-sh>npm i -g np
<span class="hljs-comment"># または yarn global add np</span></code></pre><p>あとは<code>np</code>と実行するだけです。<code>np</code>とだけ実行すると対話的にオプションを聞いてきます。それは実行時に渡すこともでき、そうすると対話を省略できます。</p><pre><code class=language-sh>$ np
$ np patch
$ np minor
$ np major</code></pre><div class=n-md_h3-box><a href=#パッケージを公開する+ネームスペースなパッケージをパブリックで公開 aria-label=ネームスペースなパッケージをパブリックで公開のアンカー class=n-md_h3-anchor></a><h3 id=パッケージを公開する+ネームスペースなパッケージをパブリックで公開 class=n-md_h3-heading>ネームスペースなパッケージをパブリックで公開</h3></div><p><code>package.json</code>に以下を追加します。</p><pre><code class=language-json>{
  <span class="hljs-attr">"publishConfig"</span>: {
    <span class="hljs-attr">"access"</span>: <span class="hljs-string">"public"</span>
  }
}</code></pre><p>あとは<code>name</code>を<code>${自分のnpm名}/${パッケージ名}</code>にして<code>npm publish</code>するだけです。</p><p>ちなみに有料 npm で自分だけが見える状態で公開したい場合は、上記の<code>publishConfig</code>設定をしなくてもネームスペースな名前で<code>publish</code>できます。</p>

パッケージを公開する方法。np というコマンドを使うと 1. 依存のクリーンインストール 2. テストの実行 3. テストが成功したらバージョンタグを振って公開 のような動作を自動でやってくれて便利です。

npm に公開する

パッケージを公開する

<p>Publish したファイルが正しいかどうかやそれらに含まれている JavaScript ファイルを HTML の<code>&lt;script src=&quot;...&quot; /&gt;</code>で読み込んで使ったりできます。</p><div class=n-md_h3-box><a href=#Publish_したファイルを一覧できるサイト+unpkg.com aria-label=unpkg.comのアンカー class=n-md_h3-anchor></a><h3 id=Publish_したファイルを一覧できるサイト+unpkg.com class=n-md_h3-heading>unpkg.com</h3></div><p>構造は、<code>https://unpkg.com/パッケージ名@バージョン/パス</code>です。（例 <a href=https://unpkg.com/vwxy@0.1.3/vwxy.js>https://unpkg.com/vwxy@0.1.3/vwxy.js</a>）また、パス部分を<code>/</code>だけにすることで静的ファイルサーバーのようにファイルを一覧できます。</p><p>たまに<code>package.json</code>の<code>files</code>の指定を忘れてしまったりするのでそういう時の確認に便利です。</p><div class=n-md_h3-box><a href=#Publish_したファイルを一覧できるサイト+cdn.jsdelivr.net aria-label=cdn.jsdelivr.netのアンカー class=n-md_h3-anchor></a><h3 id=Publish_したファイルを一覧できるサイト+cdn.jsdelivr.net class=n-md_h3-heading>cdn.jsdelivr.net</h3></div><p>構造は、<code>https://cdn.jsdelivr.net/npm/パッケージ名@バージョン/パス</code>です。（例 <a href=https://cdn.jsdelivr.net/npm/vwxy@0.1.3/vwxy.js>https://cdn.jsdelivr.net/npm/vwxy@0.1.3/vwxy.js</a>）こちらも、パス部分を<code>/</code>だけにすることで静的ファイルサーバーのようにファイルを一覧できます。</p><p>cdn.jsdelivr.net では複数のファイルを１つにまとめることができるので、沢山<code>&lt;script /&gt;</code>で読み込みたいものがある場合に便利です。その場合構造は<code>https://cdn.jsdelivr.net/combine/npm/パッケージ名@バージョン/パス,npm/パッケージ名@バージョン/パス,...</code>とカンマ区切りで指定していきます。（例 <a href=https://cdn.jsdelivr.net/combine/npm/vwxy@0.1.3/vwxy.js,npm/gsw@0.0.3/gsw.js>https://cdn.jsdelivr.net/combine/npm/vwxy@0.1.3/vwxy.js,npm/gsw@0.0.3/gsw.js</a>）</p><p>ちなみに、これはどちらもですがバージョンは省略可能です。その場合最新バージョンという意味になります。</p>

Publish したファイルを一覧できるサイト

<div class=n-md_h3-box><a href=#JSONからCLIで値を取れる_locker-keys_を作った+何故作った aria-label=何故作ったのアンカー class=n-md_h3-anchor></a><h3 id=JSONからCLIで値を取れる_locker-keys_を作った+何故作った class=n-md_h3-heading>何故作った</h3></div><p>何に使うものなのか分からない方がほとんどだと思いますが、npmに月額7$払ってプライベートパッケージとして自分用にカスタマイズしたものを作れるのが前提みたいな話だったりします。誰にでも見られてもいいならいいやつならパブリックでもいいと思いますが！</p><p>作った理由は、</p><ol><li><a href=https://github.com/nju33/.dotfiles>.dotfiles</a>なんかに書くのはちょっと…</li><li>トークンなど諸々引っ張ってこれるものが欲しかった</li><li>パブリックじゃない所で というのが主な理由です。</li></ol><div class=n-md_h3-box><a href=#JSONからCLIで値を取れる_locker-keys_を作った+例 aria-label=例のアンカー class=n-md_h3-anchor></a><h3 id=JSONからCLIで値を取れる_locker-keys_を作った+例 class=n-md_h3-heading>例</h3></div><p>まず、こんなJSONが配置されているとします。</p><pre><code class=language-json>{
  <span class="hljs-attr">"foo"</span>: {
    <span class="hljs-attr">"token"</span>: <span class="hljs-string">"..."</span>
  }
}</code></pre><p>その時にこんなコマンドを叩くと、そのパスの値が取れるというだけです。ちなみにパスが途中だった場合は<code>help</code>が表示されます。</p><pre><code class=language-bash>locker-keys foo token ...</code></pre><div class=n-md_h3-box><a href=#JSONからCLIで値を取れる_locker-keys_を作った+自分用ツールを作る aria-label=自分用ツールを作るのアンカー class=n-md_h3-anchor></a><h3 id=JSONからCLIで値を取れる_locker-keys_を作った+自分用ツールを作る class=n-md_h3-heading>自分用ツールを作る</h3></div><p>毎回JSONを作るのは面倒くさいので、自分用の読み込まれている状態のコマンドを作ります。まず<code>locker-keys</code>をインストールします。</p><pre><code class=language-bash>yarn add locker-files</code></pre><p>コマンド実行時に実行されるファイル<code>cli.js</code>はこんな感じにします。</p><pre><code class=language-js><span class="hljs-meta">#!/usr/bin/env node</span>
<span class="hljs-keyword">const</span> lockerKeys = <span class="hljs-built_in">require</span>(<span class="hljs-string">'locker-keys'</span>).default;

<span class="hljs-function">(<span class="hljs-params"><span class="hljs-keyword">async</span> (</span>) =&gt;</span> {
  <span class="hljs-keyword">await</span> lockerKeys.process(__dirname);
})()
  .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.error(err);
  })</code></pre><p>あとは、同じディレクトリに<code>locker.json</code>というファイルを置くだけです！<br>あ、<code>package.json</code>に<code>&quot;bin&quot;: {&quot;コマンドになる名前&quot;: &quot;cli.js&quot;}</code>はお忘れなく。</p><p>プライベート公開後それをインストールして、<code>コマンドになる名前 &lt;prop&gt; &lt;prop&gt;</code>で想定通りの値が表示されてば完了です！</p>

JSONからCLIで値を取れる locker-keys を作った

<div class=n-md_h3-box><a href=#GitHub_みたいな検索をした時に扱いやすいようにパースするやつ作った+何故作った aria-label=何故作ったのアンカー class=n-md_h3-anchor></a><h3 id=GitHub_みたいな検索をした時に扱いやすいようにパースするやつ作った+何故作った class=n-md_h3-heading>何故作った</h3></div><p><code>key:value text</code>みたいな検索を作りやすくしたかった。</p><div class=n-md_h3-box><a href=#GitHub_みたいな検索をした時に扱いやすいようにパースするやつ作った+リポジトリなど aria-label=リポジトリなどのアンカー class=n-md_h3-anchor></a><h3 id=GitHub_みたいな検索をした時に扱いやすいようにパースするやつ作った+リポジトリなど class=n-md_h3-heading>リポジトリなど</h3></div><ul><li><a href=https://github.com/nju33/fisea>nju33/fisea</a></li><li><a href=https://www.npmjs.com/package/fisea>fisea on npm</a></li></ul><div class=n-md_h3-box><a href=#GitHub_みたいな検索をした時に扱いやすいようにパースするやつ作った+例 aria-label=例のアンカー class=n-md_h3-anchor></a><h3 id=GitHub_みたいな検索をした時に扱いやすいようにパースするやつ作った+例 class=n-md_h3-heading>例</h3></div><p>関数は以下の2つしかありません。</p><pre><code class=language-ts><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> fisea <span class="hljs-keyword">from</span> <span class="hljs-string">'fisea'</span>;

fisea.parse(<span class="hljs-string">'foo:foo text value'</span>);
<span class="hljs-comment">// {foo: ['foo'], _: ['text', 'value']};</span>
fisea.format({foo: [<span class="hljs-string">'foo'</span>], _: [<span class="hljs-string">'text'</span>, <span class="hljs-string">'value'</span>]})
<span class="hljs-comment">// 'foo:foo text value'</span></code></pre>

GitHub みたいな検索をした時に扱いやすいようにパースするやつ作った

<div class=n-md_h3-box><a href=#syamu_さんプロキシを作った+何故作った aria-label=何故作ったのアンカー class=n-md_h3-anchor></a><h3 id=syamu_さんプロキシを作った+何故作った class=n-md_h3-heading>何故作った</h3></div><p><code>Proxy</code>APIに慣れるため。</p><div class=n-md_h3-box><a href=#syamu_さんプロキシを作った+どんなの aria-label=どんなののアンカー class=n-md_h3-anchor></a><h3 id=syamu_さんプロキシを作った+どんなの class=n-md_h3-heading>どんなの</h3></div><p>プロキシを通るト<code>0</code> <code>&#39;&#39;</code> <code>[]</code> <code>{}</code>になる。</p><div class=n-md_h3-box><a href=#syamu_さんプロキシを作った+例 aria-label=例のアンカー class=n-md_h3-anchor></a><h3 id=syamu_さんプロキシを作った+例 class=n-md_h3-heading>例</h3></div><pre><code class=language-js><span class="hljs-keyword">const</span> syamuProxy = <span class="hljs-built_in">require</span>(<span class="hljs-string">'syamu-proxy'</span>);

<span class="hljs-keyword">const</span> proxied = syamuProxy({
  <span class="hljs-attr">num</span>: <span class="hljs-number">28</span>,
  <span class="hljs-keyword">get</span> num2() {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.num;
  },
  <span class="hljs-attr">str</span>: <span class="hljs-string">'a'</span>,
  <span class="hljs-keyword">get</span> str2() {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.str;
  },
  <span class="hljs-attr">arr</span>: [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>],
  <span class="hljs-attr">obj</span>: {
    <span class="hljs-attr">foo</span>: <span class="hljs-string">'foo'</span>,
    <span class="hljs-attr">bar</span>: <span class="hljs-string">'bar'</span>
  },
  <span class="hljs-attr">void</span>: <span class="hljs-literal">undefined</span>
});

<span class="hljs-built_in">console</span>.log(proxied.num); <span class="hljs-comment">// 0</span>
<span class="hljs-built_in">console</span>.log(proxied.num2); <span class="hljs-comment">// 0</span>
<span class="hljs-built_in">console</span>.log(proxied.str); <span class="hljs-comment">// ''</span>
<span class="hljs-built_in">console</span>.log(proxied.str2); <span class="hljs-comment">// ''</span>
<span class="hljs-built_in">console</span>.log(proxied.arr); <span class="hljs-comment">// []</span>
<span class="hljs-built_in">console</span>.log(proxied.obj); <span class="hljs-comment">// {}</span>
<span class="hljs-built_in">console</span>.log(proxied.null) <span class="hljs-comment">// null</span>
<span class="hljs-built_in">console</span>.log(proxied.undefined) <span class="hljs-comment">// undefined</span></code></pre><div class=n-md_h3-box><a href=#syamu_さんプロキシを作った+リポジトリとnpm aria-label=リポジトリとnpmのアンカー class=n-md_h3-anchor></a><h3 id=syamu_さんプロキシを作った+リポジトリとnpm class=n-md_h3-heading>リポジトリとnpm</h3></div><ul><li><a href=https://github.com/nju33/syamu-proxy>nju33/syamu-proxy</a></li><li><a href=https://www.npmjs.com/package/syamu-proxy>npm: syamu-proxy</a></li></ul>

syamu さんプロキシを作った

<p>自身の Profile Setting ページへ行き、 Token タブから「Create New Token」をクリックします。</p><p><a href=https://gyazo.com/af187ad4abe1978719d3625b0a3a5103><div data-tag=img data-src=https://i.gyazo.com/af187ad4abe1978719d3625b0a3a5103.png alt=null style="min-height: 30em"></div></a></p><p>そして、アクセスレベルを選択して「Create Token」します。アクセスレベルは自分のマシン以外が対象なら「Read Only」みたいな感じで大丈夫だと思います。</p><p><a href=https://gyazo.com/0aa9ea780802d624fc6e2d0654340051><div data-tag=img data-src=https://i.gyazo.com/0aa9ea780802d624fc6e2d0654340051.png alt=null style="min-height: 30em"></div></a></p><p>Token ができたので大切に保管します。この Token は1度しか表示されないので注意です。</p><p><a href=https://gyazo.com/10f549103f6ba0309c000276498bc201><div data-tag=img data-src=https://i.gyazo.com/10f549103f6ba0309c000276498bc201.png alt=null style="min-height: 30em"></div></a></p>

authToken を取得する

<p>NodeJSのバージョンの違いでたまにこのようなエラーに遭遇します。</p><pre><code class=language-txt>NODE_MODULE_VERSION 59. This version of Node.js requires
NODE_MODULE_VERSION 67. Please try re-compiling or re-installing</code></pre><p>これはそのエラー文の上に何が原因かが一緒にかかれていると思います。例えば上は、</p><pre><code class=language-txt>Error: The module '/home/ec2-user/user-name/node_modules/bcrypt/lib/binding/bcrypt_lib.node'
was compiled against a different Node.js version using</code></pre><p>と<code>bcrypt</code>パッケージが原因で起きている事でした。</p><p>このような場合は、以下のようにそのパッケージを<code>rebuild</code>してあげる事で治りました。</p><pre><code class=language-sh>npm rebuild bcrypt --update-binary</code></pre>

resolutions で依存の依存のバージョンを指定する

NODE_MODULE_VERSION エラー

<h4 id="You need a paid account to perform this action. For more info">You need a paid account to perform this action. For more info</h4><p>恐らく<code>npm</code>をproプランで使っていてプライベートモジュールとして公開していて、basicプランに戻したとかでアクセスできなくなっている時など。</p><p>以下でパブリックアクセスに変更する。</p><pre><code class=language-sh>npm access public &lt;package-name&gt;</code></pre>