「npm」の記事 - Crieit

create-react-app(react-scripts) の X high severity vulnerabilities の警告について

2022-07-12T23:57:06+09:00

経緯

create-react-app(react-scripts) で作ったアプリに対して、パッケージ追加等をすると次のような脆弱性の警告が表示されます。

up to date, audited 1485 packages in 5s

197 packages are looking for funding
run npm fund for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

脆弱性がある、と言われるとさすがに放置はできないのでどうにかできないものかと調べました。

対応

結論から言うと、今回のケースでは無視して良い、とのことでした。

create-react-appでは脆弱性の警告が出るが無視して良い

理由としては

警告の発出元である npm audit 自体の警告が不正確
今回のケース(create-react-app(react-scripts))では依存パッケージはビルドツールとして用いられており、殆どの場合は成果物に含まれるわけではない (と思われる)
ビルドツールとして脆弱性があればアップデートがあるはず

といったところのようです。

言われて見れば確かに、というところですね。

それでも気になる場合は

dependencies にある react-scripts を devDependencies に移動させる
- npm audit --production を使用する
パッケージインストール時は npm install --no-audit で audit を使用しないように指定する

とすることで警告を表示させなくすることができるとのこと。

参考

yarn 時に gifsicle で gifsicle pre-build test failed エラー

2021-11-28T17:45:22+09:00

数日前から yarn 時に gifsicle で gifsicle pre-build test failed エラーが出るようになってしまったので対処します。

あれこれ試しましたが、結論から言うと imagemin-gifsicle が依存している gifsicle の 5.0.0 だとダメなので、 resolution で 5.2.1 を指定すると良さそうです。

現象

    "devDependencies": {

        // 略

        "gulp-imagemin": "^7.1.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.2",
        "imagemin-gifsicle": "^7.0.0",
        "imagemin-svgo": "^9.0.0",

        // 略

    }

imagemin-gifsicle を使用しているプロジェクトで yarn したところ、以下のエラーで失敗するようになってしまいました。

warning Error running install script for optional dependency: "PATH\\TO\\PROJECT\\node_modules\\gifsicle: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: PATH\\TO\\PROJECT\\node_modules\\gifsicle
Output:
Response code 404 (Not Found)
gifsicle pre-build test failed
compiling from source
Error: Command failed: C:\\WINDOWS\\system32\\cmd.exe /s /c \"autoreconf -ivf\"
'autoreconf' �́A�����R�}���h�܂��͊O���R�}���h�A
����\\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B


    at PATH\\TO\\PROJECT\\node_modules\\bin-build\\node_modules\\execa\\index.js:231:11
success Saved lockfile.

バージョンを上げても直後は特に問題なかったような気はするのですが、逐一キャッシュを削除したりしているわけではないので不明。

仕方ないので、色々ググりながら対応してみます。

対処 (失敗したものたち)

gisicle を足す

    "devDependencies": {
        // 略
        "gulp-imagemin": "^7.1.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.2",
        "imagemin-gifsicle": "^7.0.0",
        "gifsicle": "6.1.0",            // 追加
        "imagemin-svgo": "^9.0.0",
        // 略
    }

変わらず。

逆にいっそ gulp-imagemin 以外全て削除

    "devDependencies": {
        // 略
        "gulp-imagemin": "^7.1.0",
        // 略
    }

変わらず。

コマンドプロンプトを管理者実行

gifsicle ありの状態で cmd.exe を管理者として実行→変わらず。

キャッシュ削除

> yarn cache clean
yarn cache v1.22.11
success Cleared cache.
Done in 450.56s.

変わらず。

hosts に Github 関係の名前解決を書き込む

>ping raw.githubusercontent.com

raw.githubusercontent.com [185.199.108.133]に ping を送信しています 32 バイトのデータ:
185.199.108.133 からの応答: バイト数 =32 時間 =5ms TTL=58
185.199.108.133 からの応答: バイト数 =32 時間 =5ms TTL=58

185.199.108.133 の ping 統計:
    パケット数: 送信 = 2、受信 = 2、損失 = 0 (0% の損失)、
ラウンド トリップの概算時間 (ミリ秒):
    最小 = 5ms、最大 = 5ms、平均 = 5ms

元々 raw.githubusercontent.com に ping はできていましたが、 hosts に次のように追記してみます。

52.74.223.119     github.com
192.30.253.119    gist.github.com
54.169.195.247    api.github.com
185.199.111.153   assets-cdn.github.com
151.101.76.133    raw.githubusercontent.com
151.101.76.133    gist.githubusercontent.com
151.101.76.133    cloud.githubusercontent.com
151.101.76.133    camo.githubusercontent.com
151.101.76.133    avatars0.githubusercontent.com
151.101.76.133    avatars1.githubusercontent.com
151.101.76.133    avatars2.githubusercontent.com
151.101.76.133    avatars3.githubusercontent.com
151.101.76.133    avatars4.githubusercontent.com
151.101.76.133    avatars5.githubusercontent.com
151.101.76.133    avatars6.githubusercontent.com
151.101.76.133    avatars7.githubusercontent.com
151.101.76.133    avatars8.githubusercontent.com

変わらず。

なお、ここまで次の issue にあった対処法。

Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c "autoreconf -ivf" · Issue #33 · imagemin/imagemin-gifsicle · GitHub

ネットワークを変更

違う場所に出かけて、ゲートウェイを変更してみました。

が、変わらず。

最小限構成で実験する

長丁場になりそうだったので最小限構成の package.json を作成して検証を続行。

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  }
}

これでyarn。変わらず。

ちなみに yarn.lock の中身は次のような感じ。

gifsicle@^5.0.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.3.0.tgz#499713c6f1e89ebbc3630da3a74fdb4697913b4e"
  integrity sha512-FJTpgdj1Ow/FITB7SVza5HlzXa+/lqEY0tHQazAJbuAdvyJtkH4wIdsR2K414oaTwRXHFLLF+tYbipj+OpYg+Q==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.0.0"

imagemin-gifsicle@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0"
  integrity sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==
  dependencies:
    execa "^1.0.0"
    gifsicle "^5.0.0"
    is-gif "^3.0.0"

imagemin-gifsicle が依存している gifsicle のバージョンが悪いのではないか、と思い resolutions を追加することにしました。

resolutions を追加

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  },
  "resolutions": {
    "gifsicle": "^6.1.0"
  }
}

すると、 yarn は通りました。

しかし、 6系は "Use native ESM" なので require を使用している現環境での使用は不可です。惜しい。

resolutions の指定を 5.3.0 にする

[email protected], gifsicle@^5.0.0:
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-6.1.0.tgz#16194fe7d9420a539709eb065e7245eaf74de5a7"
  integrity sha512-tmnKbW2UQzoc/FTg2dq98sUaoGM1/CRQP+HtyeIMNLDlB8ijZbX7TKBCc2s5YJ8oXUZIxdqXH2rKXnCB0/Hg3w==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.1.1"

gifsicle - npmを確認したところ、11/26現在で 6.1.0 と並んで "3 days ago" となっている 5系最新の 5.3.0 があることが判明。

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  },
  "resolutions": {
    "gifsicle": "^5.3.0"
  }
}

しかしNG。

5.3.0 is error · Issue #134 · imagemin/gifsicle-bin · GitHub

yep, this repo's 5.3.0 tag is missing, that makes the downloading process of bin-wrapper failed.

5.3.0 is error · Issue #134 · imagemin/gifsicle-bin · GitHub

タグ付けをミスって生まれてしまったバージョンらしいので、これは使えないとのこと。なんて紛らわしい……。

resolutions の指定を 5.2.1 にする

{
    "name": "tmp",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "devDependencies": {
      "imagemin-gifsicle": "^7.0.0"
    },
    "resolutions": {
      "gifsicle": "5.2.1"
    }
}

package.json のチルダ(~) とキャレット(^) - Qiita

^5.2.1 とキャレットを付けると 5.2.1 <= version < 6.0.0 となってしまい、 5.3.0 に上がってしまうので 5.2.1 とキャレットを外して指定します。

[email protected], gifsicle@^5.0.0:
  version "5.2.1"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.2.1.tgz#efadab266a493ef0b4178e34597493349937369e"
  integrity sha512-9ewIQQCAnSmkU2DhuWafd1DdsgzAkKqIWnY+023xBLSiK9Az2TDUozWQW+SyRQgFMclbe6RQldUk/49TRO3Aqw==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.0.0"

imagemin-gifsicle@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0"
  integrity sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==
  dependencies:
    execa "^1.0.0"
    gifsicle "^5.0.0"
    is-gif "^3.0.0"

これでようやく通りました。処理も無事にできることを確認。

……思ったよりも手間取りました。

参考

gifsicle

package.json

package.json のチルダ(~) とキャレット(^) - Qiita

package.json の情報をスクリプト内で参照したい

2021-09-08T23:30:59+09:00

package.json の情報をスクリプト内で参照したくなったのでその方法をメモ。

方法

const packageJson = require('./package.json');

console.log(packageJson.version);
// 0.0.1
console.log(packageJson.dependencies);
// { bootstrap: '^5.1.0' }

普通に require で読み込めるようです。

const packageJson = require('./package.json');

console.log(packageJson.version);
// 0.0.1
console.log(packageJson.devDependencies['browser-sync']);
// ^2.27.5

パッケージ名にハイフンがある場合はオブジェクトのキー名を指定する形式で使用パッケージのバージョン情報が取得できますね。

思ったよりも簡単にできることが確認できました。

ちなみに……

> node -v
v16.3.0
> npm -v
7.15.1

実行環境はとあるプロジェクトでこんな感じでした。最新に上げないといけませんがそれはそれとして。

参考

package.jsonのversionをコマンド(ワンライナー)で取り出したい - Qiita
package.jsonの各種要素を読み込みたい！ - DEV Community
scripts | npm Docs
- process.env.npm_package_XXXXXXXXXX の形は手元の環境で試したところ undefined になってしまいました……

npm でパッケージを公開する

2021-09-07T23:46:08+09:00

一度は試してみたいと思っていた npmパッケージの公開をやってみることにします。

パッケージの準備

今回はテストのため、事前に作ってあったconsole.log で画像を表示するプログラムで試すことにしてみます。

ちなみにパッケージは以下のものがあるようなイメージで。

package.json
- name
- description
- version
- main
- author
- license
- 辺りが記述されていること
.gitignore
(.npmignore)
LICENSE
テストコード
CI設定

リポジトリ

GitHub - arm-band/console-cafebabe: npmパッケージのテスト。 console.log で画像を出力します。

一揃いを準備。ついでに Github Actions でバッジを付けておきます。

npm アカウントの作成

続いて npm にアカウントを作成します。

ユーザ名、パスワード、メールアドレスを入力。ちなみにメールアドレスはパッケージのメタ情報に含まれて第三者に公開される可能性がある、との注意書きがあるので念のため専用のメールアカウントを用意しておきます。

ログインするとメールでの認証を求められるので先ほど入力したメールアドレスに届いている認証のボタンを押しておきます。

認証完了。

npmパッケージの公開

npmアカウントの作成が完了したらいよいよパッケージの公開作業です。

パッケージのプロジェクトのルートディレクトリでターミナルを開き、 npm login で npm にログインします。

> npm login
npm notice Log in on https://registry.npmjs.org/
Username: YOURNPMUSERNAME
Password:
Email: (this IS public) [email protected]
Logged in as YOURNPMUSERNAME on https://registry.npmjs.org/.

OK。次に念のためパッケージとして公開されるファイルを確認しておきます。

> npm pack
npm notice 
npm notice 📦  [email protected]
npm notice === Tarball Contents ===
npm notice 125B  __tests__/main.test.js
npm notice 401B  .github/workflows/ci.yml
npm notice 1.0kB LICENSE
npm notice 44B   bin/cli.js
npm notice 36B   bin/postinstall.js
npm notice 82B   index.js
npm notice 57B   jest.config.js
npm notice 417B  package.json
npm notice 277B  readme.md
npm notice 6.9kB src/main.js
npm notice === Tarball Details === 
npm notice name:          console-cafebabe
npm notice version:       0.0.1
npm notice filename:      console-cafebabe-0.0.1.tgz
npm notice package size:  6.7 kB
npm notice unpacked size: 9.4 kB
npm notice shasum:        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
npm notice integrity:     sha512-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
npm notice total files:   10
npm notice
console-cafebabe-0.0.1.tgz

npm pack するとtgz形式でパッケージの圧縮ファイルが生成されます。 Tarball Contents の中身や実際に展開して中身を確認し、公開したくないファイルが混ざってないか最後のチェックを行います。問題なければ公開へ。

> npm publish
npm notice 
npm notice 📦  [email protected]
npm notice === Tarball Contents ===
npm notice 125B  __tests__/main.test.js
npm notice 401B  .github/workflows/ci.yml
npm notice 1.0kB LICENSE
npm notice 44B   bin/cli.js
npm notice 36B   bin/postinstall.js
npm notice 82B   index.js
npm notice 57B   jest.config.js
npm notice 417B  package.json
npm notice 277B  readme.md
npm notice 6.9kB src/main.js
npm notice === Tarball Details ===
npm notice name:          console-cafebabe
npm notice version:       0.0.1
npm notice filename:      console-cafebabe-0.0.1.tgz
npm notice package size:  6.7 kB
npm notice unpacked size: 9.4 kB
npm notice shasum:        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
npm notice integrity:     sha512-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
npm notice total files:   10
npm notice
+ [email protected]

npm publish で公開します。わりとあっという間に終わります。

npm 上で検索すると公開したパッケージが見付かります。きちんと公開されていますね！

インストールテスト

今度はインストールしてみましょう。 package.json で以下のように自分のパッケージを dependencies に追加します。

    "dependencies": {
        "console-cafebabe": "0.0.1"
    },

npm i -D または yarn 。

node_modules の中に入ってきましたね。これだけでもちょっと感動。

import consoleCafebabe from 'console-cafebabe';

consoleCafebabe.coffee();

Webpack前提のプロジェクトのエントリポイントのJSに import して、想定通りの使い方としてメソッドを呼び出してみます。

作った通り、 console.log に画像や装飾された文字列が表示されました。成功です。

ログアウト

> npm logout
>

パッケージ公開後は npm logout でターミナル上でもログアウトしておくと事故の確率が減らせそうなのでログアウトしておきます。

これで一通りの流れは押さえることができたと思います。

参考

📝 Node.js パッケージを公開するための GitHub Actions を構築する

2021-06-21T22:22:57+09:00

react-emoji-textarea の開発を行った際、リリースを作成したら自動的に Node.js パッケージにライブラリが公開される仕組みがほしいと考え、GitHub Actions でそれを実現することにしました。

その際、公式サイトに公開されている内容を参考に GitHub Actions を作成したのですが、そのまま利用すると私の環境では下記のエラーが発生してしまいました。

error Couldn't publish package: "https://registry.yarnpkg.com/@nikaera/react-emoji-textarea: You do not have permission to publish \"react-emoji-textarea\". Are you logged in as the correct user?"

上記のエラーについて調査しながら改修したところ、最終的に下記の GitHub Actions で Node.js パッケージを公開できるようになりました。secrets.NPM_TOKEN には NPM Token を登録します。

# package.yml
name: Node.js Package
on:
  # workflow_dispatch を追加して手動でも実行できるよう改修
  workflow_dispatch:
  release:
    types: [created]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14.x"
          registry-url: "https://registry.npmjs.org"
          # registry.npmjs.org へアクセスする際は必ず認証を試みるオプションを追加
          always-auth: true
          # scope には自分のユーザ名を指定
          scope: "@nikaera"
        # .npmrc に https://registry.npmjs.org アクセス時に利用する認証情報を記載する
      - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
      - name: Build react-emoji-textarea 😆💖
        run: |
          yarn install --frozen-lockfile
          yarn format
          yarn build
      - run: yarn publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}