一般的なステンシルCLIの落とし穴とそれらを回避する方法

Stencil Command Line Interfaceは、BigCommerceテーマの変更をリアルタイムでプレビューし、ストアにアップロードできる圧縮されたテーマにファイルをバンドルできる強力なツールです。 Stencilを初めて使用する場合、この種の開発に飛び込むのは少し気が遠くなるかもしれません。

開発者コミュニティのモデレーターとして、インストールプロセス中に一般的なエラーが発生する可能性があることに気付きました。 Stencil開発をローカルのセットアップとプロセスに統合することは、いくつかの一般的な落とし穴を乗り越えれば簡単になります。この投稿では、ステンシルの開発へのジャンプをガイドし、いくつかのトリッキーな部分で発生する可能性のある摩擦を減らすのに役立ちます。

Stencil CLIが必要ですか?

まず、おそらく最も重要なこととして、ストアで必要な設計変更を行うために実際にStencil CLIをインストールする必要があるかどうかを判断する必要があります。一生懸命ではなく、賢く働く!

その決定を行う際に役立ついくつかのシナリオを以下に示します。

Q:保証情報など、製品ページでさらにいくつかの製品詳細を顧客に表示したいのですが、現在のテーマではネイティブに表示されません。 Stencil CLIをインストールする必要がありますか?

A:いいえ! CLIを使用せずに、テンプレートファイルに{{product.warranty}}などの追加のステンシルオブジェクトプロパティへの参照を追加できます。 BigCommerceには、必要な変更を加えるために使用できる組み込みのテーマファイルエディターがあります。テーマファイルにアクセスし、ダッシュボードで直接変更を加える方法については、こちらのガイドをご覧ください。

利用可能なオブジェクトのリストと、それらを参照できるパーシャルについては、ドキュメントを参照してください。 (フロントマター付きのテンプレートで新しいオブジェクトを宣言することを忘れないでください。)

Q:ストアを追加の言語に翻訳するには、Stencil CLIをインストールする必要がありますか?

A:はい。これは、新しいjson翻訳ファイルを追加するため、CLIをインストールする必要があり、それらをテーマにバンドルする必要があるためです。

Q:特定の製品のカスタムページレイアウトを作成したいのですが。これを行うにはCLIが必要ですか?

A:はい。カスタムテンプレートファイルを作成するには、Stencil CLIをインストールする必要があります。作業中に製品ページでカスタムテンプレートをプレビューし、テーマに新しいファイルをバンドルするには、CLIが必要です。

CLIのインストール

BigCommerce Dev CenterにCLIをインストールするための簡単なガイドがありますが、インストールプロセス中に人々が行き詰まる傾向があるいくつかのポイントに対処したいと思います。

Gitとnpmを使用して依存関係をインストールする

Windowsユーザーは、ステンシルとその依存関係をnpmから取得するときに行き詰まることがあることに気付きました。これを行うには、Unixコマンドを実行できるシェルコマンドラインツールが必要です。ドキュメントでは、Git Bashを推奨していますが、Powershellまたは他のソフトウェアを使用できます。

Stencilの実行に必要な依存関係でNodeをインストールすると、npmコマンドを使用できるようになります。

既存のテーマのカスタマイズ

ドキュメントでは、GitHubから最新バージョンのCornerstoneを取得することをお勧めしますが、変更するテーマが既にある場合は必要ありません。

このシナリオでは、BigCommerceダッシュボードからテーマをダウンロードするだけです。 [ストアフロント]> [マイテーマ]で[現在のテーマをダウンロード]をクリックして、テーマのzipファイルをダウンロードします。

(注:Pixel Unionテーマの場合、このステップの前にBitBucket SSHキーをセットアップする必要があります。)

次に、それを解凍し、シェルでテーマディレクトリに移動します

cd / files / my_theme

次に実行する

npmインストール

依存関係のバージョンに注意してください

Stencil CLIのインストール時にユーザーが遭遇する最大の問題は、推奨バージョンのNodeまたはPythonを使用していないか、CLI自体の最新バージョンを使用していないことです。

少し前にCLIをダウンロードした場合は、今が最新バージョンをインストールする良い機会です。これをスムーズに行うには、次を実行します

npm uninstall -g @ bigcommerce / stencil-cli

それから

npm install -g @ bigcommerce / stencil-cli

これにより、CLIがグローバルにアンインストールおよび再インストールされます。

Nodeを使用して、バージョン6.10.3〜8.12.0をテストしました。以前のバージョンまたはそれ以降のバージョンを使用している場合、ステンシル初期化を実行すると、大量の楽しい警告に加えて、このようなエラーが表示される場合があります。

致命的なエラー:「sass / context.h」ファイルが見つかりません

さて、今何?まず、Nodeモジュールフォルダーを破棄します。

rm -rf node_modules

nvm install 7.6.0を実行します

サポートされているバージョンが正常にインストールされたら、nvm use 7.60を実行し、node -vを実行して使用していることを再確認します。サポートされているバージョンを使用していることがわかります

ノードv7.6.0(npm v6.8.0)を使用しています

最後に、テーマディレクトリでnpm installを実行すると、すべてのNodeモジュールを正常にインストールできるはずです。ステンシルinitを実行しても、エラーは表示されません。開発を開始する準備ができたら、ステンシルスタートを実行してください!

よくある質問

Q:npm install:npm ERRを実行するとエラーが表示されます!このコマンドをroot / Administratorとして再度実行してください。

A:管理者としてnpmキャッシュを強制的に消去してみてください:

sudo cache clean -f

次に、npm installagainを実行します。

Q:ステンシル初期化の実行中に500エラーが表示されます。これはBigCommerceの終了時のエラーによるものですか?

A:これが発生したときに確認することがいくつかあります。

  • Nodeの推奨バージョンを使用していることを確認してください
  • BigCommerceストアにステンシルテーマが適用されていない場合、このエラーが表示されます。
  • これは、CloudflareやAmazon Cloudfrontのようなプロキシベースのドメインサービスを使用してストアにリクエストを行う副作用です。これが原因であると思われる場合は、マシン上のhostsファイルを変更して、ローカルホストをストアのBigCommerce IPにマップします。

Q:Stencilをインストールしてセットアップできましたが、カスタムテンプレートファイルをプレビューしようとすると404エラーが表示されます!

A:このエラーが発生する理由は、.stencilファイルでカスタムテンプレートをマッピングしたのと同じURLを使用して、ライブストアで対応するページを最初に作成する必要があるためです。たとえば、カスタム商品テンプレートのキーを含めるために、.stencilファイルを既に編集したとします。

"製品": {
“ alternate-product.html”:” / test-url /”
}

BigCommerceストアのコントロールパネルにログインし、URL / test-url /を使用して製品を作成する必要があります。

最終的な考え

インストールプロセスを分析すると、各ステップのトラブルシューティングがはるかに簡単になります。まだ迷っている場合、特定の設定がある場合、または高度なステンシル開発について他の開発者とチャットしたい場合は、開発者コミュニティにアクセスしてください。取り組んでいる興味深いステンシルプロジェクトがありますか? @BigcommerceDevsをツイート—私たちはそれについて聞きたいです!