「Nodejs」の記事 - Crieit

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 になってしまいました……

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる

2021-08-17T23:17:25+09:00

経緯

ある日、 package gardening をして Gulp を走らせたら

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

と怒られてしまいました。

$ gulp
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\index.js
require() of ES modules is not supported.
require() of PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\index.js from PATH\TO\PROJECT\DIRECTORY\gulp\tasks\imagemin.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\package.json.

今回は gulp-imagemin のスクリプトの中に起因するようなので、そちらに手を入れるのは避けたいところです。

さて、どうしたものか。

結論

結論から先にいうと、 gulp-imagemin をダウングレードすることで回避するしかなさそうです。

今回は 8.0.0 から既存の 7.1.0 にダウングレードします。

調査

"type": "module"

Node.js の ESModules

検索すると、 package.json にパラメータを追記する方法が出てきます。

{
    "engines": {
        "node": ">=16.0.0",
        "npm": ">=6.14.9"
    },
    "engineStrict": true,
    "prettier": {},
    "type": "module" // 追記
}

"type": "module" を追記する方法です。

しかし、この方法を採用する場合、既存の Gulpタスク全てを CommonJS (require) から ES Modules (import) に書き換える必要があります。

それはそれで既存スクリプトの書き換えが大変なことになってしまうので、この方法は今回は不採用。

公式リポジトリを覗く

そこで公式リポジトリを覗いてみます。

早速同じ内容の Issues が散見されます。そして回答では「リリースノートを見よ」とのこと。

Releases · sindresorhus/gulp-imagemin · GitHub

This package is now pure ESM. Please read this.

Releases · sindresorhus/gulp-imagemin · GitHub

最初からここを見ましょう、という話ではあるのですが。

Pure ESM package · GitHub

ご覧の通り、「8.0.0 からは ES Modules のパッケージになっていますよー」というアナウンス。

したがって、先の結論の通り CommonJS を使用したければダウングレードせよ、ということになります。是非もなし。

Node.js のバージョン管理として Volta を使う

2021-08-09T17:46:21+09:00

Nodist から脱却する方法第二弾。

経緯

Docker で Node.js のバージョン切替環境を構築するで一度 Docker 環境上に Node.js 環境を作りましたが、メモリ領域の不足で遅かったり Browsersync との連動が面倒だったりしたので、やはり一枚レイヤーを挟まずホスト側でストレートに構築する方法も模索すべきか……と思い至ったので Volta を試すことにしました。

Nodist のアンインストール

今回はPCに直接インストールする形なのでモロに Nodist のバッティングします。そこで、まずは Nodist をアンインストールします。

1. Nodist のアンインストール

まずはアンインストール。コンパネからでも Nodist のインストールフォルダにある uninstall.exe を実行するのでもどちらでも。

2. フォルダの削除

アンインストールしても Nodist のフォルダやら残骸がインストールフォルダ (デフォルトならば C:\Program Files (x86)\Nodist\) に残るので、これを強制削除。

3. .npmrc の削除

使用ユーザのフォルダ直下に .npmrc (C:\Users\\.npmrc) が残るのでこれを削除……と言いたいところですが、私の場合は存在していませんでした。

そのため、ここはパス。

4. npm-cache の削除

使用ユーザのAppData\Roaming の下に npm-cache (C:\Users\\AppData\Roaming\npm-cache) が残るのでこれを削除。

5. 環境変数の確認

環境変数に Nodist の Node.js へのパスが残っている場合はこれを削除……と言いたいところですが、私の場合は存在していませんでした。

そのため、ここもパス。

Volta のインストール

Nodist を削除したら、 Volta をインストールします。

Releases · volta-cli/volta · GitHub

記事執筆時は 1.0.4 が最新でした。この msi をダウンロード。後は実行してインストール。

>volta -v
1.0.4

入りました。

>volta install [email protected]
success: installed and set [email protected] (with [email protected]) as default            9

>node -v
v16.3.0

>npm -v
7.15.1

続いて適当なバージョンの Node.js をインストールします。 npm も入りました。良い感じですね。

>volta install yarn
success: installed and set [email protected] as default                             0

>yarn -v
1.22.11

yarn も入れます。

とあるプロジェクトで、 Node.js のバージョンを14系で固定してみます。

> volta pin node@14
success: pinned [email protected] (with [email protected]) in package.json

OK.

    "volta": {
        "node": "14.17.4"
    }

package.json に Volta 使用時の Node.js のバージョンが追記されました。これでプロジェクトごとにバージョンを切り替えられるのは良いですね。

参考

Nodist アンインストール

2020 年ではもう使えない Nodist はアンインストールする (Windows)

キャップ野球専用スコアブック入力アプリをリリースした

2020-12-30T20:51:19+09:00

蓋野球スコア入力アプリ「CAP-SCOREBOOK」

https://cap-scoresheet.netlify.app

機能概要

非ログイン時(閲覧モード)
- 試合結果閲覧
- 試合内容閲覧
- 個人成績閲覧
- チーム成績閲覧
- リーグ成績閲覧
- ログイン時(入力モード)
- チーム新規作成
- 選手新規作成
- 試合新規作成
- スターティングメンバー設定
- 結果入力
  - 1球ごと入力
  - 1打席ごと入力
- 自責点・勝敗S入力

開発環境

NextJS(static export)
Netlify
検証機: Pixel4a(Android)/12mini(iOS)/PC
サーバ側: NodeJS
DB: MySQL
Docker-compose
ReactNative For Web
ユーザ認証: firebase

10/21 蓋世・エスト監督からスコアを共有できるアプリはないか聞かれる
10/25 1打席ごとの入力ができるWEBアプリの仮実装が終わる
10/30 スコアの活用方法思い付かずに実装中断
11/26
https://twitter.com/Yokoppe_cap/status/1331653356872298496
よこっぺさんの一言で中断してたスコアアプリの開発のやる気が復活する。
11/28 リーグ戦の帰りにkamiさんが「投球分析したいなぁ」と言う話をする。
11/29〜
ある程度実装が終わっていたアプリに1球ごとのコース分析機能を拡張したアプリに着手。
当初はReactNativeを使ったandroid/iOSアプリを想定。
12/1 ネイティブアプリから得意なWEBアプリへの舵の切り直しを宣言。
12/4 ReactNative For Webの採用を決定。
12/7 Hirooookiさんから投手視点への切り替えが欲しいとの要望を受けるhttps://twitter.com/gstiltonhs/status/1335606102675783680
12/11 配球分析機能の実装が完了
12/14 いらすとやからのデザイン変更
12/21 テストコードの実装に着手
12/30 α版リリース

今回新たに使った技術

ReactNative For Web

CSSが書きにくいと思って敬遠していたのですが、いざ使ってみるとモバイルに最適化されていて、きちんとスタイルを書けば複雑なUIも実現できたので、食わず嫌いはよくないなと。

開発する上で役に立ったこと

やっぱりみんなのSCOREの開発経験ですかね。
DB設計的にはCAP-SCOREBOOKの方が1球ずつ記録する分複雑なのですが、
CAP-SCOREBOOKにほとんどDB設計を応用できました。

今後の展開(β版へ向けて)

共同編集機能
スコアシート出力機能(需要があれば)