次の方法で共有

POS 拡張機能で Knockout.js のような外部またはサード パーティー ライブラリを使用する

  • [アーティクル]

この記事では、販売時点管理 (POS) 拡張機能で Knockout.js を使用する方法に関するいくつかの基本的な手順を示します。同じパターンを、他の外部ライブラリまたはサード パーティー ライブラリに適用できます。 Retail ソフトウェア開発キット (SDK) バージョン 10.0.18 以降に適用されます。

  1. Knockout.js ライブラリの NuGet パッケージ参照を、Pos.Extensions プロジェクトに追加します。

  2. MSBuild ターゲットを追加して、ビルド中に knockout ライブラリをプロジェクト ディレクトリにコピーし、パッケージに含めます。 次の例は、XML を示しています。

    <Target Name="ContentIncludeKnockoutLibrary" BeforeTargets="AssignTargetPaths" DependsOnTargets="RunResolvePackageDependencies">
    <PropertyGroup>
        <KnockoutjsFile>Libraries/knockout.js</KnockoutjsFile>
        <KnockoutLibraryFilePath Condition="'%(PackageDefinitions.Name)' == 'knockoutjs'">%(PackageDefinitions.ResolvedPath)\Content\Scripts\knockout-%(PackageDefinitions.Version).js</KnockoutLibraryFilePath>
    </PropertyGroup>
    <Copy SourceFiles="$(KnockoutLibraryFilePath)" DestinationFiles="$(KnockoutjsFile)" SkipUnchangedFiles="true" /> <!-- Necessary for CPOS -->
    <ItemGroup>
        <Content Include="$(KnockoutjsFile)"></Content>
    </ItemGroup>
</Target>

  3. パッケージの manifest.json ファイルを更新して、依存関係として knockout ライブラリが含まれるようにします。 依存関係配列に knockout ライブラリの新しいエントリを追加します。

    メモ

    modulePath の値は、前の手順で追加した MSBuild ターゲットの KnockoutjsFile 変数と一致する必要があります。

    "dependencies": [
    {
      "alias": "knockout",
      "format": "amd",
      "modulePath": "Libraries/knockout"
    }
]

メモ

外部ライブラリが他のライブラリに依存している場合は、依存関係をコピーするために、パッケージ マニフェストと msbuild ターゲットにすべての依存ライブラリを含めます。

  1. Pos.Extensions プロジェクトファイルを更新して、Knockout.js タイプの宣言を含めます。

    1. knockout の公式リリースに移動します。

    2. manifest.json ファイルに依存関係として含めていたバージョンのソース コード (zip) をダウンロードします。

    3. zip ファイルのコンテンツを抽出します。 タイプは、<KNOCKOUT_LIBRARY_FOLDER>\build\types\knockout.d.ts にあります。

    4. knockout.d.ts ファイルを拡張機能プロジェクトの任意のフォルダーにコピーします。

    5. tsconfig.json ファイルを更新して、Knockout.js のパス エイリアスを含めます。

      メモ

      次のコード例の Libraries/knockout を、前の手順で knockout.d.ts ファイルをコピーした場所への相対パスに置き換えます。

      {
  "extends": "./devDependencies/pos-tsconfig-base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "knockout": [ "Libraries/knockout" ]
    },
    "noImplicitAny": false
  }
}

    6. knockout.d.ts ファイルが自動的に含まれない場合に備えて、プロジェクトに含め、ソース管理システムにチェックインします。

  2. ApplicationStart トリガーを作成して、__posStopExtensionsBinding ハンドラーを登録します。 この方法により、Knockout.js パッケージのバージョンと POS に読み込まれる他のバージョンとの競合を防ぎます。 POS 拡張機能の例で、例を表示します。

  3. 次の例に示すように、ライブラリをインポートして、拡張モジュールで Knockout.js を使用します。

    import ko from "knockout"; // The name of the import 'knockout' must match the one in the tsconfig and manifest file.