• ..

CSS

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

    パッケージをインストールする時にpackage@versionという風に指定することで、特定のバージョン(や範囲)に固定することができます。

    ちなみに例にはreactパッケージを用い、これを書いている時点のreactパッケージの最新は16.8.3です。

    不等号

    大なり >

    yarn add 'react@>15'
    {
      "dependencies": {
        "react": ">16"
      }
    }

    上記のようにするとバージョン16より大きいもの、つまり17.x.x18.x.xの中で1番最新のものという意味になります。>16とすると、まだパッケージが存在していないのでETARGETエラーになります。(yarnだと対話モードでのバージョン選択になります)

    大なりイコール >=

    yarn add 'react@=>16'
    {
      "dependencies": {
        "react": ">16"
      }
    }

    先程のを=>に変更すると16以上という意味になり16.x.x系も含まれるのでエラーにならなくなります。

    小なり <

    yarn add 'react@<16'
    {
      "dependencies": {
        "react": "<16"
      }
    }

    向きを反対にすると逆の意味になります。<はそれより小さいバージョン、つまり上記の場合は15.x.x14.x.xの1番最新バージョンが対象になります。

    小なりイコール <

    yarn add 'react@<16'
    {
      "dependencies": {
        "react": "<=16"
      }
    }

    これは16以下なので、16.x.x15.x.x14.x.xの中で最新という意味になります。これを書いている時点では16.8.3ということになります。

    記号

    チルダ ~

    yarn add 'react@~16.8.0'
    {
      "dependencies": {
        "react": "~16.8.0"
      }
    }

    そのマイナーバージョン(2番目の数値)の最新という意味になります。つまり上記の場合は最新が16.8.3なので16.8.3, 16.8.2, 16.8.1, 16.8.0 の中で最新という意味になるので16.8.3がインストールされます。

    キャレット ^

    yarn add 'react@^16.0.0'
    {
      "dependencies": {
        "react": "^16.0.0"
      }
    }

    そのグローバルバージョン(1番目の数値)での最新という意味になります。これは@versionを指定しないと自動で@^latest-versionとなります。これも16.8.3, 16.8.2, 16.8.1, 16.8.0, 16.7.0, ..., 16.0.0という意味になるので16.8.3がインストールされます。

    エックス x

    yarn add 'react@16.8.x'
    {
      "dependencies": {
        "react": "16.8.x"
      }
    }

    そのxに1番大きな数値が入ったバージョンがインストール対象になります。これを書いている時点では16.8.3が最新なので、xには3が入ります。

    記号なし

    yarn add 'react@16.8.3'
    {
      "dependencies": {
        "react": "16.8.3"
      }
    }

    ただバージョンを指定するとそのバージョン固定になり、必ず指定したバージョンのものがインストールされます。。

    パッケージを公開する

    僕はsindresorhus/npを使った方法が簡単だと思うのでこれを使います。

    np を使う

    これ使うと、

    1. 依存のクリーンインストール
    2. テストの実行
    3. テストが成功したらバージョンタグを振って公開

    というようなことを自動でやってくれます。

    これは以下のようにインストールできます。

    npm i -g np
    # または yarn global add np

    あとはnpと実行するだけです。npとだけ実行すると対話的にオプションを聞いてきます。それは実行時に渡すこともでき、そうすると対話を省略できます。

    $ np
    $ np patch
    $ np minor
    $ np major

    ネームスペースなパッケージをパブリックで公開

    package.jsonに以下を追加します。

    {
      "publishConfig": {
        "access": "public"
      }
    }

    あとはname${自分のnpm名}/${パッケージ名}にしてnpm publishするだけです。

    ちなみに有料 npm で自分だけが見える状態で公開したい場合は、上記のpublishConfig設定をしなくてもネームスペースな名前でpublishできます。

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

    Publish したファイルが正しいかどうかやそれらに含まれている JavaScript ファイルを HTML の<script src="..." />で読み込んで使ったりできます。

    unpkg.com

    構造は、https://unpkg.com/パッケージ名@バージョン/パスです。(例 https://unpkg.com/vwxy@0.1.3/vwxy.js)また、パス部分を/だけにすることで静的ファイルサーバーのようにファイルを一覧できます。

    たまにpackage.jsonfilesの指定を忘れてしまったりするのでそういう時の確認に便利です。

    cdn.jsdelivr.net

    構造は、https://cdn.jsdelivr.net/npm/パッケージ名@バージョン/パスです。(例 https://cdn.jsdelivr.net/npm/vwxy@0.1.3/vwxy.js)こちらも、パス部分を/だけにすることで静的ファイルサーバーのようにファイルを一覧できます。

    cdn.jsdelivr.net では複数のファイルを1つにまとめることができるので、沢山<script />で読み込みたいものがある場合に便利です。その場合構造はhttps://cdn.jsdelivr.net/combine/npm/パッケージ名@バージョン/パス,npm/パッケージ名@バージョン/パス,...とカンマ区切りで指定していきます。(例 https://cdn.jsdelivr.net/combine/npm/vwxy@0.1.3/vwxy.js,npm/gsw@0.0.3/gsw.js

    ちなみに、これはどちらもですがバージョンは省略可能です。その場合最新バージョンという意味になります。

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

    何故作った

    何に使うものなのか分からない方がほとんどだと思いますが、npmに月額7$払ってプライベートパッケージとして自分用にカスタマイズしたものを作れるのが前提みたいな話だったりします。誰にでも見られてもいいならいいやつならパブリックでもいいと思いますが!

    作った理由は、

    1. .dotfilesなんかに書くのはちょっと…
    2. トークンなど諸々引っ張ってこれるものが欲しかった
    3. パブリックじゃない所で というのが主な理由です。

    まず、こんなJSONが配置されているとします。

    {
      "foo": {
        "token": "..."
      }
    }

    その時にこんなコマンドを叩くと、そのパスの値が取れるというだけです。ちなみにパスが途中だった場合はhelpが表示されます。

    locker-keys foo token ...

    自分用ツールを作る

    毎回JSONを作るのは面倒くさいので、自分用の読み込まれている状態のコマンドを作ります。まずlocker-keysをインストールします。

    yarn add locker-files

    コマンド実行時に実行されるファイルcli.jsはこんな感じにします。

    #!/usr/bin/env node
    const lockerKeys = require('locker-keys').default;
    
    (async () => {
      await lockerKeys.process(__dirname);
    })()
      .catch(err => {
        console.error(err);
      })

    あとは、同じディレクトリにlocker.jsonというファイルを置くだけです!
    あ、package.json"bin": {"コマンドになる名前": "cli.js"}はお忘れなく。

    プライベート公開後それをインストールして、コマンドになる名前 <prop> <prop>で想定通りの値が表示されてば完了です!

    syamu さんプロキシを作った

    何故作った

    ProxyAPIに慣れるため。

    どんなの

    プロキシを通るト0 '' [] {}になる。

    const syamuProxy = require('syamu-proxy');
    
    const proxied = syamuProxy({
      num: 28,
      get num2() {
        return this.num;
      },
      str: 'a',
      get str2() {
        return this.str;
      },
      arr: ['foo', 'bar'],
      obj: {
        foo: 'foo',
        bar: 'bar'
      },
      void: undefined
    });
    
    console.log(proxied.num); // 0
    console.log(proxied.num2); // 0
    console.log(proxied.str); // ''
    console.log(proxied.str2); // ''
    console.log(proxied.arr); // []
    console.log(proxied.obj); // {}
    console.log(proxied.null) // null
    console.log(proxied.undefined) // undefined

    リポジトリとnpm

    authToken を取得する

    自身の Profile Setting ページへ行き、 Token タブから「Create New Token」をクリックします。

    そして、アクセスレベルを選択して「Create Token」します。アクセスレベルは自分のマシン以外が対象なら「Read Only」みたいな感じで大丈夫だと思います。

    Token ができたので大切に保管します。この Token は1度しか表示されないので注意です。

    NODE_MODULE_VERSION エラー

    NodeJSのバージョンの違いでたまにこのようなエラーに遭遇します。

    NODE_MODULE_VERSION 59. This version of Node.js requires
    NODE_MODULE_VERSION 67. Please try re-compiling or re-installing

    これはそのエラー文の上に何が原因かが一緒にかかれていると思います。例えば上は、

    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

    bcryptパッケージが原因で起きている事でした。

    このような場合は、以下のようにそのパッケージをrebuildしてあげる事で治りました。

    npm rebuild bcrypt --update-binary

    エラー

    恐らくnpmをproプランで使っていてプライベートモジュールとして公開していて、basicプランに戻したとかでアクセスできなくなっている時など。

    以下でパブリックアクセスに変更する。

    npm access public <package-name>