🛍️

Shopify CLIで構築した初期Appのコードを見る〜package.json編〜

2021/05/28に公開

npm

Jest

Shopify

tech

背景

Shopify公式のReact+node.jsのチュートリアルをやったが、これがどうもその通りにやってもうまく出来ない。

手詰まりになったところShopify App CLIというもので、簡単にアプリが作れるらしい。
便利すぎる。(管理画面からやるの結構めんどくさかった)

Shopify App CLI

shopify app cliとは？(公式から引用)

Shopify App CLIツールは、コードのスキャフォールディングと開発プロセスの自動化によって、アプリ開発を手助けするためのコマンドラインツール。

CLIをターミナルやコマンドラインにインストールし、コマンドを叩くだけでAppの初期設定ができる。。
最高。

詳細はこちらから↓

https://shopify.dev/tools/cli

Shopify Tutorialと何が違う？package.json編

本題のShopify App CLIで構築したAppのコードに入るが、今回はpackage.json編。
Tutorialで作るコードと比較する。(scriptあたり)

そりゃCLI使ってるから中身違うのは当たり前、、、
なのだが、知らないモジュールをたくさん使っていたためためその辺りを備忘録として示しておく。

Shopify tutrial

"script": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
},

Shopify App CLI

  "test": "jest",
  "dev": "cross-env NODEE_ENV=development nodemon ./server/index.js --watch ./server/index.js",
  "build": "NEXT_TELEMETRY_DISABLED=1 next build",
  "start": "cross-env NODE_ENV=production node ./server.index.js"

CLIの方は何をしているんだ状態、、
その気持ちに負けず一個ずつ調べた

Jest

この部分

"test": "jest",

Jestとは…
JavaScriptの高機能かつ依存が少ないテスティングフレームワーク

その名の通り、テストを実行する際に便利なフレームワークのよう。
テストについても学ぶ必要が出てきた。(今回は取り上げない)
【公式リンク】 https://jestjs.io/ja/

cross-env

この部分

"dev": "cross-env NODEE_ENV=development

and

"start": "cross-env NODE_ENV=production

cross-envとは…
プラットフォーム間で環境変数を設定および使用するスクリプトを実行できる

スクリプト実行時に、package.jsonで環境変数(たとえばNODE_ENV)をセットしつつ起動したいとき、cross-envをつかうと実行環境がWindowsなのかLinux、Macなのか、といったプラットフォームを意識しなくて良いようにすることができるもの。

なるほどなんとなくわかってきた。
【参考】 https://qiita.com/riversun/items/d45b26f4a7aad6e51b69

nodemon

この部分

nodemon ./server/index.js --watch ./server/index.js

nodemonとは…
ディレクトリ内のファイルの変更が検出されたときにノードアプリケーションを自動的に再起動するツール
--watchオプションをつけることで複数のディレクトリを監視することができる。
*デフォルトでは、nodemonは現在の作業ディレクトリを監視

Node.jsだと変更を反映させるために、再起動をする。
それを勝手にしてくれるのはかなり便利なんじゃないか？

【参考】
https://github.com/remy/nodemon

Next.js TELEMETRYオプション

この部分

"build": "NEXT_TELEMETRY_DISABLED=1

Next.js TELEMETRYオプションとは…
一般的な使用状況に関する匿名のテレメトリデータを収集するためにNextに導入されたもの

NEXT_TELEMETRY_DISABLED=1を指定していないと、Next.js側に

なんのコマンドを呼び出したか
Nuxt.js と Node.js のバージョン
一般的なマシン情報（MacOS/Linux/Windows や CI 内で実行されるコマンド、ci 名）
等が送られるらしい。

それに同意しない場合は指定してね、というもの。
なるほど。

【公式リンク】
https://nextjs.org/telemetry

あとがき

何も知らずにコマンドを叩いていたが、わかるとどういう理由でこのコマンドを叩いているのかわかるようになり勉強になった。
しかし何よりもCLIが有能すぎる。。

背景

Shopify App CLI

Shopify Tutorialと何が違う？package.json編

Jest

cross-env

nodemon

Next.js TELEMETRYオプション

あとがき

Discussion