【SPFx】Webパーツをパッケージ化・展開

f:id:tecchan365:20190731211110p:plain

SharePoint Frameworkで作成したWebパーツを、パッケージ化・展開する方法をご紹介します。

バンドル(複数のスクリプトを1つのファイルにまとめる)

VIsual Studio Codeのメニューから、 [ターミナル] > [新しいターミナル] の順にクリックします。

f:id:tecchan365:20190731205109p:plain

表示されたターミナルに、以下のコマンドを入力し、[Enter] を押します。

gulp bundle --ship

f:id:tecchan365:20190731215321p:plain

コマンドの実行が完了すると、「temp」フォルダーが作成され、中にはバンドルされたファイルがはいっています。

f:id:tecchan365:20190731215721p:plain

パッケージ化

ソリューションをパッケージ化します。 以下のコマンドを実行します。

gulp package-solution --ship

f:id:tecchan365:20190731220120p:plain

実行が完了すると、「sharepoint」フォルダーが作成され、その中にパッケージファイル(<Webパーツ名>.sppkg)があります。
このパッケージファイルを、アプリカタログにアップロードすることで、Webパーツを展開することができます。

f:id:tecchan365:20190731220338p:plain

パッケージファイルをアプリカタログにアップロード

アプリカタログを開き、先程作成したパッケージファイルをアップロードします。

f:id:tecchan365:20190731221311p:plain

確認画面が表示されるので、[展開] をクリックします。

f:id:tecchan365:20190731221606p:plain

これで作成したWebパーツが展開できました。

サイトにアプリをインストール

作成したWebパーツを利用するには、Webパーツを利用するサイトでインストールしなければいけません。

サイトを開き、ホーム画面から [新規] > [アプリ] の順にクリックします。

f:id:tecchan365:20190731221855p:plain

アプリの一覧の中から、作成したWebパーツを選択します。

f:id:tecchan365:20190731221952p:plain

選択すると、選択したアプリがインストールされます。
※インストールには時間がかかる場合があります。

f:id:tecchan365:20190731222114p:plain

インストールが完了すると、Webパーツが利用できるようになっています。

f:id:tecchan365:20190731222424p:plain

以上、Webパーツアプリの展開方法でした。

補足

Visual Studio Code の拡張機能を使えば、gulp serve から アプリカタログへの展開まで簡単にできるようになります。

f:id:tecchan365:20190731222650p:plain

mynote365.hatenadiary.com

mynote365.hatenadiary.com