SharePoint Framework でライブラリ コンポーネント タイプを使用してソリューションを構築するBuilding solutions with the library component type in SharePoint Framework

サード パーティ製 SPFx ライブラリを作成する方法How to create a third-party SPFx library

  1. こちらの手順を使用して、開発環境を設定します。Using the instructions here, set up the dev environment.

  2. お気に入りの場所に新しいプロジェクト ディレクトリを作成します。Create a new project directory in your favorite location

    md corporate-library
    
  3. プロジェクト ディレクトリへ移動します。Go to the project directory

    cd corporate-library
    
  4. Yeoman SharePoint ジェネレーターを実行して、新しい ライブラリを作成します。Create a new library by running the Yeoman SharePoint Generator

    yo @microsoft/sharepoint
    
  5. ダイアログ ボックスが表示されたら、次の手順に従います。When prompted:

  6. プロンプトが表示されたら、以下の値を入力します (以下で省略されたすべてのプロンプトに対して既定のオプションを選択します)。When prompted, enter the following values (select the default option for all prompts omitted below):

    • テナント管理者が、サイトで機能を展開したり、アプリを追加したりせず、すぐにすべてのサイトでソリューションを展開できるようにしたいですか?: YDo you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?: Y
    • どの種類のクライアント側コンポーネントを作成しますか?: ライブラリWhich type of client-side component to create?: Library
    • ライブラリ名は何ですか?: CorporateLibraryWhat is your Library name?: CorporateLibrary
    • ライブラリの説明: CorporateLibrary の説明What is your Library description?: CorporateLibrary description
  7. プロジェクトがスキャフォールディングされると、index.ts ファイルと一緒に作成されたライブラリが表示されます。そのファイルには、作成された CorporateLibrary からのエクスポートが含まれています。Once the project is scaffolded, you'll see the library created with an index.ts file containing an export from the CorporateLibrary created.

  8. お気に入りのエディターでソリューションを開き、src\corporateLibrary\CorporateLibraryLibrary.ts に移動しますOpen the solution in your favorite editor and navigate to src\corporateLibrary\CorporateLibraryLibrary.ts

  9. 既定のメソッドである name() が作成されているのがわかります。You'll notice that a default method, name() has been created. このメソッドの名前を次のように変更します。Rename this method as follows:

    public getCurrentTime(): string {
      return 'The current time as returned from the corporate library is ' + new Date().toTimeString();
    }
    
  10. コマンド プロンプト上で gulp を実行して、ビルドがすべて正常であることを確認します。Run gulp on the command prompt to see everything builds fine.

サード パーティ製 SPFx ライブラリを使用する方法 (ローカル テストの場合)How to consume a third-party SPFx library (for local testing)

  1. ライブラリ ソリューションのルート ディレクトリから npm link を実行します。Run npm link from the root directory of library solution. この場合は、corporate-library フォルダーからとなります。In this case, it would be from the corporate-library folder.

  2. 新しい SPFx ライブラリ コンポーネントへのシンボリック リンクを作成したすぐ後に、少なくとも 1 回は gulp build を実行します。Right after creating the symbolic link to your new SPFx library component, don't forget to run at least once gulp build. ライブラリ コンポーネントをモジュールとして別のプロジェクトにインポートできるようにするために、少なくとも 1 回はコンパイルします。Compile your library component at least once in order to be able to import it as a module into a different project. package.json には "main": "lib/index.js" と書かれており、インポートを試みる前にその場所が存在している必要があります。Remember that the package.json says that "main": "lib/index.js", therefore, that location needs to exist prior to any import attempt.

  3. これにより、package.json で指定されている名前を持つライブラリへのローカル npm リンクが作成されます。This will create a local npm link to the library with the name, which is provided in the package.json.

  4. Web パーツ プロジェクトを、ライブラリ プロジェクト フォルダー構造内ではなく個別のプロジェクト フォルダーに作成します。手順については、こちらを参照してください。Create a web part project in a separate project folder, so not in the library project folder structure, following the instructions from here. Web パーツに CorporateWebPart という名前を付けます。Name your web part CorporateWebPart.

  5. 新しい Web パーツ フォルダーのルートから、コマンド npm link corporate-library を実行します。From the root of the new web part folder, run the command npm link corporate-library

  6. これにより、Web パーツにローカルに組み込まれているそのライブラリへのシンボリック リンクが作成され、それがご自分の Web パーツで使用できるようになります。This will create a symbolic link to that locally built library in to the web part and will make it available to your web part.

  7. お気に入りのエディターで Web パーツ ソリューションを開き、src\webparts\corporateWebPart\CorporateWebPartWebPart.ts に移動しますOpen the web part solution in your preferred editor and navigate to src\webparts\corporateWebPart\CorporateWebPartWebPart.ts

  8. ご使用のライブラリを参照するインポートを追加します。Add an import to refer to your library:

    import * as myLibrary from 'corporate-library';
    
  9. render メソッドを次のように変更します。Change the render method as follows:

    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() メソッドを参照します。Notice that we're creating a new instance of the library, and then refer to the getCurrentTime() method to retrieve the current time string from the library.

  10. ローカル ワークベンチを起動してご自分の Web パーツをテストし、ページにその Web パーツを追加します。Test your web part by launching the local workbench and add the web part to the page:

    gulp serve
    

テナント アプリ カタログからサード パーティ製 SPFx ライブラリを展開して使用する方法How to deploy and consume a third-party SPFx library from tenant App Catalog

  1. corporate-library のルート フォルダーに移動して、ソリューションをバンドルし、パッケージ化します。Navigate to the corporate-library root folder and bundle and package the solution:

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

    これにより、加えられたローカルの変更がビルドされ、ソリューションが *.sppkg ファイルにパッケージ化されます。このファイルは、sharepoint\solution フォルダー内にあります。This will build any local changes made and package the solution into an *.sppkg file, which is located in the sharepoint\solution folder.

  2. このパッケージをテナント アプリ カタログに展開します。次に、このソリューションを組織内のすべてのサイトで使用可能にするオプションをオンにしてテナント全体に展開します。Deploy this package in the tenant App Catalog and make it tenant wide deployed by checking the Make this solution available to all sites in the organization option.

  3. Web パーツのソリューション フォルダーに移動し、そのフォルダーのルートにある package.json ファイルを開きます。Navigate to the web part solution folder, and open the package.json file in the root of that folder.

  4. ライブラリ エントリとそのバージョンを反映するエントリを dependencies セクションに次のように追加します (そのセクションは以前に作成したライブラリ ソリューションの package.json ファイルにあります)。Add an entry to reflect the library entry and its version to the dependencies section (you can find this in the package.json file of the library solution you're created earlier) as follows:

    "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 install will throw an error if you create a web part and you just added a reference to package.json and don't create a local reference using npm link. npm link を使用してリンクを作成してから npm install を実行した場合、npm install の実行中にエラーは表示されませんが、シンボリック リンクが削除されます。If you have created a link using npm link and run npm install, you will not receive an error during npm install but the symbolic link will be removed. npm install を実行する場合は、社内ライブラリへの参照を一時的に削除し、npm link corporate-library を実行することで参照を再度確立することによって、package.json 内で参照を更新する必要があります。If you want to run npm install, you will have to temporarily remove the reference to the corporate library and re-establish the reference by running npm link corporate-library and update the reference in package.json.

  5. Web パーツを次のように作成します。Build the web part:

    gulp bundle --ship
    gulp package-solution --ship
    
  6. テナントのアプリ カタログに Web パーツ ソリューションを展開します。Deploy the web part solution to the tenant App Catalog.

  7. 新規に追加された Web パーツをページに追加します。そして、ライブラリが自動的に Web パーツの機能を利用できるようになることに注目してください。Add the newly added web part to a page and notice that the library is automatically made available to the web part functions.

  8. ライブラリを変更し、そのライブラリをもう一度アプリ カタログに発行すると、Web パーツが自動的に更新されます。Web パーツの再構築/再発行を行う必要はありません。Making any changes to the library, and publishing the library to the App Catalog again will automatically update the web part without the need to rebuild/republish the web part.

開発中に SPFx プロジェクトでシンボリックリンクされた SPFx ライブラリのリンクを解除するには、SPFx プロジェクトのルート フォルダーに移動してコマンドを実行します。To unlink a SPFx library that was symlinked during development in your SPFx project, navigate to SPFx project root folder and run the command.

npm unlink corporate-library

SPFx ライブラリのフォルダーの場所を確認します。To check the folder location of SPFx library.

npm ls -g 'corporate-library'

ライブラリへのローカル npm リンクを削除するには、SPFx ライブラリのルート フォルダーに移動してコマンドを実行します。To remove local npm link to the library, navigate to the SPFx library root folder and run the command.

npm unlink

関連項目See also