Velo：npm パッケージを操作する
読了時間：6分
Velo by Wix 公式サイトで Velo の特徴や機能を学んでいきましょう。
最も一般的な再利用可能な JavaScript コードのレジストリは npm です。npm では、再利用可能な各コードライブラリをパッケージと呼びます。 Velo では、承認済みの npm パッケージをサイトにインストールできます。 Velo サイトで有効利用できるパッケージはほとんどが承認済みです。使用したいパッケージが未承認の場合、リストへの追加をリクエストできます。インストールしたら、そのパッケージをインポートして自分のコードで使用できます。
新しいパッケージをインストールする
パッケージをインストールする方法：
- Veloサイドバーで「サイトコード」ボタンをクリックします。
- パッケージの「npm」にマウスオーバーし、プラスアイコン
をクリックし、「Install Packages（新規パッケージをインストール）」をクリックします。
パッケージマネージャーが開きます。
- 「npm」セクションで、サイトに追加するパッケージを検索します。 Wix サイトで使用されている最も人気のある npm パッケージが 10個表示されます。Wix サイトでこれらのパッケージを使用する方法は、パッケージマネージャーの右側に記載されています。
- 選択したパッケージの横に「インストール」ボタンがあるかどうかを確認します。
- 「インストール」ボタンがある場合は、次の操作を行います：
- 「インストール」をクリックします。「インストール」ボタンのテキストが「表示」に変わり、インストールされたパッケージが Velo サイドバーの「パッケージ」セクションに追加されます。
- 「表示」をクリックします。パッケージの Readme がコードパネルに表示され、Velo サイドバーの「パッケージ」セクションにパッケージのファイル構造が表示されます。
- 「インストール」ボタンがない場合、パッケージはまだ承認されていません。パッケージにマウスオーバーし、「もっと見る」アイコン
をクリックします。「要求」を選択してリクエストフォームを開きます。リクエストフォームに必要事項を記入して送信してください。 npm レジストリに存在するバージョンを入力してください。
- 「インストール」ボタンがある場合は、次の操作を行います：
注意：
- 以下のインジケータアイコンが関連するパッケージの横に表示されます：
パッケージがリクエストされ、承認待ちであることを示します。
パッケージがサポートされていないことを示します。
- npm パッケージをインストールすることで、npm モジュールのライセンス契約に同意したことになります。
インストール済みパッケージを使用する
インストール済みのパッケージを使用するには、コードにパッケージをインポートします。各パッケージには独自のインポートステートメントがあります。使用するインポートステートメントについては、パッケージの外部ドキュメントを参照してください。
たとえば、「 lodash」パッケージがインストールされている場合、次のように機能を使用できます：
1// Import the package in your code: import _ from 'lodash'; // Use the following code to union two arrays: let unionArray = _.union(1, 2, 3], [3, 4, 5]); // unionArray = [1,2,3,4,5]Velo サイドバーの「パッケージ」セクションでパッケージのファイル構造を確認できます。サイドバーでパッケージをクリックすると、Readme がコードパネルで開きます。トップ 10 の npm パッケージについては、パッケージの Readme ファイルの上部にあるサイトでのパッケージの使用方法に関する説明を参照してください。
パッケージの readme ファイルを開き、[npmjs.com の新しいブラウザタブでパッケージに関するその他の情報を確認することもできます。パッケージにマウスオーバーし、「もっと見る」アイコン をクリックし、「ドキュメントを見る」を選択します。
をクリックし、「ドキュメントを見る」を選択します。
パッケージの例
サイトで特定のnpmパッケージを使用する方法を理解するには、Veloサンプルページをご覧ください。サンプルを開いて、パッケージを操作するために追加したコードを確認できます。 npm の例を見つけるには、サンプルページの検索バーに「npm」と入力します。
パッケージのバージョンを更新する
パッケージを最新バージョンに更新する方法：
- パッケージマネージャーを開き、「インストール済みパッケージ」を選択します。
- パッケージにマウスオーバーし、
- 「vX.XX に更新する」を選択するオプションがある場合、インストールされたパッケージのバージョンより新しいサポート済みバージョンがあります。「vX.XX に更新する」をクリックして、パッケージを指示されたバージョンに更新します。
- 「最新バージョンを要求する」を選択するオプションがある場合、インストールされているバージョンは最新バージョンであるか、パッケージのより新しいバージョンがまだ承認されていないことを意味します。「最新バージョンを要求する」をクリックして、リクエストフォームを開きます。リクエストフォームに記入して送信します。バージョンは事前に入力されており、変更することはできません。
重要：
パッケージアップデートを適用した後、サイトのコードがパッケージの更新されたバージョンと互換性があることを確認してください。
パッケージをアンインストールする
パッケージをアンインストールする方法：
- Velo サイドバーのパッケージ（npm）セクションからアンインストールしたいパッケージにマウスオーバーし、「もっと見る」アイコン
をクリックし、「アンインストール」を選択します。 - アンインストールされたパッケージは、Velo サイドバーのパッケージ（npm）セクションから削除されます。
警告：
パッケージをアンインストールすると、そのパッケージに依存するコードが破損する可能性があります。
パッケージを要求する
注意：
承認および却下された npm パッケージのリストはこちらで確認できます。
サポートされているパッケージのリストにパッケージの追加を要求する方法：
- パッケージマネージャーの「npm」セクションを開きます。
- 要求するパッケージを検索ボックスで探します。
- 「インストール」ボタンがあれば、パッケージはサポートされています。「インストール」をクリックします。インストールしたパッケージは、Velo サイドバーの「パッケージ（npm）」セクションに追加されます。
- 「インストール」ボタンがない場合、パッケージはまだ承認されていません。パッケージにマウスオーバーし、「もっと見る」アイコン
をクリックします。「要求」を選択してリクエストフォームを開きます。リクエストフォームに必要事項を記入して送信してください。 npm レジストリに存在するバージョンを入力してください。
パッケージサポート
要求されたほとんどのパッケージは承認され、あなたのコードで使用することができます。しかし、たとえパッケージが承認されていたとしても、パッケージの機能を理解し、どのような状況で使用でき、どのような状況で使用してはいけないのかを知っておくことはあなたの責任です。
タイプによってはサポートされていないパッケージがあります。これには、プライベートパッケージ、特定のハードウェア上で動作する必要のあるパッケージ、セキュリティリスクにさらされる可能性のあるパッケージが含まれます。
承認されたパッケージをコードで使用する際に考慮すべき点がいくつかあります：
- 一部のパッケージはクライアントサイドのコードでのみ使用することを目的としたものと、サーバーサイドのコードでのみ使用することを目的としたものがあります。パッケージは必ず意図された場所で使用してください。
- 一部のパッケージには、DOM と相互作用する機能を含んでいるものがあります。Velo では、DOM と相互作用するのではなく、ページ要素と相互作用するために $w API を使用するので、これらのパッケージに含まれる機能の一部は動作しません。
- 一部のパッケージはReactで動作します。これらのパッケージは、カスタム要素と組み合わせてのみ使用できます。
- パッケージの機能を使用しているときに発生したエラーは、ブラウザコンソールに反映される場合があります。これらのエラーは、Velo からではなく、パッケージの実装によって生成されます。エラーの原因を理解するには、パッケージのドキュメントを参照してください。
パフォーマンス
- クライアント側のコードで npm パッケージをインポートすると、ページのペイロードが増加し、サイトのパフォーマンスに悪影響を及ぼす可能性があります。
お役に立ちましたか？
|