.sppkgを作る

まず、バージョンを確認する

パッケージにはバージョン番号が付きます。config/package-solution.json を開き、version を確認しましょう。

{
  "solution": {
    "name": "spfx-list-viewer-client-side-solution",
    "id": "……",
    "version": "1.0.0.0"
  }
}

初回は 1.0.0.0 のままでOKです。このバージョンは、あとで更新版を配るときに上げることになります（この記事の最後で触れます）。

本番用にビルドする

パッケージ生成は、プロジェクトフォルダで次の1コマンドです。

npm run build

これは package.json に定義された本番ビルドで、中身は次の2段階です。

• heft test --clean --production … きれいな状態から本番用にコンパイル・検査
• heft package-solution --production … 検査済みの成果物を .sppkg にまとめる

gulp 世代の gulp bundle --ship && gulp package-solution --ship にあたる作業を、Heft世代では npm run build 一発で行う、と考えてください。

できあがった .sppkg の在り処

ビルドが成功すると、.sppkg ファイルがここに生成されます。

sharepoint/solution/spfx-list-viewer.sppkg

この1ファイルが、これから配る「アプリの実体」です。中身はコードやリソースが1つに固められていて、そのままSharePointへ登録できます。

更新版を配るときは、バージョンを上げる

いま作ったのは 1.0.0.0。あとで機能を直して配り直すときは、package-solution.json の version を上げてから（例：1.0.1.0）、もう一度 npm run build します。バージョンを上げないと、SharePoint側が「新しい版だ」と認識してくれません。この運用は、次の記事の最後でもう一度触れます。

この記事のまとめ

• 配布の実体は .sppkg。npm run build で生成する
• npm run build ＝ 本番コンパイル＋パッケージ化（gulp世代の bundle/package-solution 相当）
• 成果物は sharepoint/solution/*.sppkg
• 更新版は package-solution.json の version を上げてから再ビルド

パッケージができました。次はいよいよ最終工程——これをSharePointにアップロードし、ページに配置して「本番で動く」状態にします。