SharePoint Framework でライブラリ コンポーネント タイプを使用してソリューションを構築する

  • [アーティクル]

このチュートリアルでは、SharePoint Framework (SPFx) ライブラリ コンポーネントを作成し、クライアント側の Web パーツ内で使用します。

サード パーティ製 SPFx ライブラリを作成する方法

  1. お気に入りの場所に新しいプロジェクト ディレクトリを作成します。

    md corporate-library

  2. プロジェクト ディレクトリへ移動します。

    cd corporate-library

  3. Yeoman SharePoint ジェネレーターを実行して、新しい ライブラリを作成します。

    yo @microsoft/sharepoint

  4. プロンプトが表示されたら、以下の値を入力します (以下で省略されたすべてのプロンプトに対して既定のオプションを選択します):

    • テナント管理者が、サイトで機能を展開したり、アプリを追加したりせず、すぐにすべてのサイトでソリューションを展開できるようにしたいですか?: はい
    • どの種類のクライアント側コンポーネントを作成しますか?: ライブラリ
    • ライブラリ名は何ですか?: CorporateLibrary
    • ライブラリの説明: CorporateLibrary の説明

  5. プロジェクトがスキャフォールディングされると、index.ts ファイルと一緒に作成されたライブラリが表示されます。そのファイルには、作成された CorporateLibrary からのエクスポートが含まれています。

  6. お気に入りのエディターでソリューションを開き、src/corporateLibrary/CorporateLibraryLibrary.ts に移動します

  7. 既定のメソッドである name() が作成されているのがわかります。 このメソッドの名前を次のように変更します。

    public getCurrentTime(): string {
  return 'The current time as returned from the corporate library is ' + new Date().toTimeString();
}

  8. コマンド プロンプト上で gulp を実行して、ビルドがすべて正常であることを確認します。

サード パーティ製 SPFx ライブラリを使用する方法 (ローカル テストの場合)

  1. ライブラリ ソリューションのルート ディレクトリから gulp bundle --ship を実行します。 単純な gulp build が機能しません。

  2. ライブラリ ソリューションのルート ディレクトリから npm link を実行します。 この場合は、corporate-library フォルダーからとなります。

  3. 新しい SPFx ライブラリ コンポーネントへのシンボリック リンクを作成したすぐ後に、少なくとも 1 回は gulp build を実行します。 ライブラリ コンポーネントをモジュールとして別のプロジェクトにインポートできるようにするために、少なくとも 1 回はコンパイルします。 package.json には "main": "lib/index.js" と書かれており、インポートを試みる前にその場所が存在している必要があります。

  4. これにより、package.json で指定されている名前を持つライブラリへのローカル npm リンクが作成されます。

  5. Web パーツ プロジェクトを、ライブラリ プロジェクト フォルダー構造内ではなく個別のプロジェクト フォルダーに作成します。手順については、こちらを参照してください。 Web パーツに CorporateWebPart という名前を付けます。

  6. 新しい Web パーツ フォルダーのルートから、コマンド npm link corporate-library を実行します。

  7. これにより、Web パーツにローカルに組み込まれているそのライブラリへのシンボリック リンクが作成され、それがご自分の Web パーツで使用できるようになります。

  8. お気に入りのエディターで Web パーツ ソリューションを開き、src/webparts/corporateWebPart/CorporateWebPartWebPart.ts に移動します

  9. ご使用のライブラリを参照するインポートを追加します。

    import * as myLibrary from 'corporate-library';

  10. render() メソッドを次のように変更します。

    public render(): void {
  const myInstance = new myLibrary.CorporateLibraryLibrary();

  this.domElement.innerHTML = `
  <div class="${ styles.corporateWebPart }">
      <div class="${ styles.container }">
      <div class="${ styles.row }">
          <div class="${ styles.column }">
          <span class="${ styles.title }">Welcome to SharePoint!</span>
          <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
          <p>${myInstance.getCurrentTime()}</p>
          <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
          </a>
          </div>
      </div>
      </div>
  </div>`;
}

    ライブラリの新しいインスタンスが作成中であることに注意し、ライブラリから現在の時刻の文字列を取得する getCurrentTime() メソッドを参照します。

  11. ローカル ワークベンチを起動してご自分の Web パーツをテストし、ページにその Web パーツを追加します。

    gulp serve

テナント アプリ カタログからサード パーティ製 SPFx ライブラリを展開して使用する方法

  1. corporate-library のルート フォルダーに移動して、ソリューションをバンドルし、パッケージ化します。

    gulp bundle --ship
gulp package-solution --ship

    これにより、行われたローカル変更がビルドされ、ソリューションが sharepoint/solution フォルダー内の *.sppkg ファイルにパッケージ化されます。

  2. このパッケージをテナント アプリ カタログに展開します。次に、このソリューションを組織内のすべてのサイトで使用可能にするオプションをオンにしてテナント全体に展開します。

  3. Web パーツのソリューション フォルダーに移動し、package.json ファイルを開きます。

  4. ライブラリ エントリとそのバージョンを反映するエントリを dependencies セクションに次のように追加します (そのセクションは以前に作成したライブラリ ソリューションの package.json ファイルにあります)。

    "dependencies": {
  "corporate-library": "0.0.1", // here we added the reference to the library
  "@microsoft/sp-core-library": "1.9.0",
  "@types/webpack-env": "1.13.1",
  "@types/es6-promise": "0.0.33"
},

    注:

    Web パーツを作成してから、package.json への参照を追加しただけであり、npm link を使用してローカル参照を作成したわけではない場合は、npm install からエラーがスローされます。 npm link を使用してリンクを作成してから npm install を実行した場合、npm install の実行中にエラーは表示されませんが、シンボリック リンクが削除されます。 npm install を実行する場合は、社内ライブラリへの参照を一時的に削除し、npm link corporate-library を実行することで参照を再度確立することによって、package.json 内で参照を更新する必要があります。

  5. Web パーツを次のように作成します。

    gulp bundle --ship
gulp package-solution --ship

  6. テナントのアプリ カタログに Web パーツ ソリューションを展開します。

  7. 新規に追加された Web パーツをページに追加します。そして、ライブラリが自動的に Web パーツの機能を利用できるようになることに注目してください。

  8. ライブラリを変更し、そのライブラリをもう一度アプリ カタログに発行すると、Web パーツが自動的に更新されます。Web パーツの再構築/再発行を行う必要はありません。

開発中に SPFx プロジェクトでシンボリックリンクされた SPFx ライブラリのリンクを解除するには、SPFx プロジェクトのルート フォルダーに移動してコマンドを実行します。

npm unlink corporate-library

SPFx ライブラリのフォルダーの場所を確認します。

npm ls -g 'corporate-library'

ライブラリへのローカル npm リンクを削除するには、SPFx ライブラリのルート フォルダーに移動してコマンドを実行します。

npm unlink

関連項目