安装

在介绍使用方式之前，需要先说明一下，libpag SDK 的运行需要依赖于 libpag.js 和 libpag.wasm 文件。可以简单的理解为 libpag.js 是代理层，libpag.wasm 是核心层。

而 libpag.wasm 是如何加载的呢，当引入 libpag.js 后需要调用其 PAGInit() 接口进行实例化，这个时候会默认去加载当前执行脚本同级目录下的 libpag.wasm 文件。当 libpag.wasm 并不载同级目录下时，可以使用 PAGInit() 上的钩子 locateFile 去指定 libpag.wasm 的路径。

wasm文件是可以 GZIP 的，公共 CDN 默认启用了 wasm 文件的 GZIP，如果是自己的静态资源服务需要手动配置。

通过 CDN 使用

直接使用 <script> 引入 CDN 上的 js 文件。

<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>

你可以在公共 CDN cdn.jsdelivr.net/npm/libpag/ 浏览 NPM 包内的内容，如果想要指定某一个版本可以使用 @<version> 指定。

也可以使用其他同步 NPM 的公共 CDN 如 unpkg 或者将文件下载下来自行加载。

使用全局引入的版本

libpag 会被注册为一个全局变量，可以调用 libpag.PAGInit 来实例化以获得 PAG 实例：

<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
<script>
  libpag.PAGInit().then((pag) => {
    // 实例化成功
  })
</script>

在线示例

使用 ES 模块引入的版本

大多数的现代浏览器现在都已原生支持ES模块，所以可以这样使用：

<script type="module">
    import { PAGInit } from "https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.esm.js";
    PAGInit({
      locateFile: (file) => "https://cdn.jsdelivr.net/npm/libpag@latest/lib/" + file
    }).then((pag) => {
      // 实例化成功
    })
</script>

这里可以注意到 PAGInit 方法中使用 locateFile 的钩子指向 libpag.wasm 的位置。

在线示例

通过 NPM 使用

前提条件

1. 已经安装 Node.js，并且熟悉命令行
2. 熟悉 Webpack/Rollup 等打包工具

本节中我们将介绍如何在工程化的项目中引入 libpag，其中需要配置 Webpack/Rollup 对 libpag.wasm 进行拷贝动作。

在命令行中运行 npm 进行 libpag 安装（不要带上 > 符号）：

> npm install libpag

在代码中引入：

import { PAGInit } from 'libpag';
PAGInit().then(pag => {
  // 实例化成功
})

需要注意的是，像 Webpack 和 Rollup 等打包工具是默认没有打包 .wasm 文件的。也就是说如果你的项目时 Vue / React 这类使用脚手架构建的项目需要把 node_modules 下的 libpag/lib/libpag.wasm 文件打包到最终产物中，并且使用 locateFile 钩子返回 libpag.wasm 文件的路径，这样才能确保在网络请求中能加载到 libpag.wasm 文件。

简单的接入示例和 Vue / React / PixiJS 等配置示例， 可以点击 这里 查看。