使用构建缓存提供程序

通过缓存和重用来自服务提供者的构建版本来加速本地开发。


构建缓存是一项实验性功能,它基于 fingerprint 项目,通过远程缓存构建来加速 npx expo run:[android|ios]。运行 npx expo run:[android|ios] 时,它会检查是否存在具有匹配指纹的版本,然后下载并启动它,而不是重新编译它。否则,项目将照常编译,然后将生成的二进制文件上传到远程缓存以供将来运行。

¥Build caching is an experimental feature that speeds up npx expo run:[android|ios] by caching builds remotely, based on the project fingerprint. When you run npx expo run:[android|ios], it checks if a build with a matching fingerprint exists, then downloads and launches it rather than compiling it again. Otherwise, the project is compiled as usual and then the resulting binary is uploaded to the remote cache for future runs.

使用 EAS 作为构建提供程序

¥Using EAS as a build provider

要使用 EAS Build 提供程序插件,首先需要安装 eas-build-cache-provider 包作为开发者依赖:

¥To use the EAS Build provider plugin, start by installing the eas-build-cache-provider package as a developer dependency:

Terminal
npx expo install eas-build-cache-provider

然后,更新你的 app.json 文件,使其在 experiments 下包含 buildCacheProvider 属性及其提供程序:

¥Then, update your app.json to include the buildCacheProvider property and its provider under experiments:

app.json
{
  "expo": {
    ...
    "experiments": {
      "buildCacheProvider": "eas"
    }
  }
}

你可以通过导出实现以下方法的插件来构建自己的缓存提供程序:

¥You can roll your own cache provider by exporting a plugin that implements the following methods:

type BuildCacheProviderPlugin<T = any> = {
  /**

   * Try to fetch an existing build. Return its URL or null if missing.
   */
  resolveBuildCache(props: ResolveBuildCacheProps, options: T): Promise<string | null>;

  /**

   * Upload a new build binary. Return its URL or null on failure.
   */
  uploadBuildCache(props: UploadBuildCacheProps, options: T): Promise<string | null>;

  /**

   * (Optional) Customize the fingerprint hash algorithm.
   */
  calculateFingerprintHash?: (
    props: CalculateFingerprintHashProps,
    options: T
  ) => Promise<string | null>;
};

type ResolveBuildCacheProps = {
  projectRoot: string;
  platform: 'android' | 'ios';
  runOptions: RunOptions;
  fingerprintHash: string;
};
type UploadBuildCacheProps = {
  projectRoot: string;
  buildPath: string;
  runOptions: RunOptions;
  fingerprintHash: string;
  platform: 'android' | 'ios';
};
type CalculateFingerprintHashProps = {
  projectRoot: string;
  platform: 'android' | 'ios';
  runOptions: RunOptions;
};

构建缓存提供程序示例 中可以找到使用 GitHub Releases 缓存构建的参考实现。

¥A reference implementation using GitHub Releases to cache builds can be found in the Build Cache Provider Example.

创建自定义构建提供程序

¥Creating a custom build provider

首先创建一个提供程序目录,用于用 TypeScript 编写提供程序插件,并在项目根目录中添加一个 provider.plugin.js 文件,该文件将成为插件的入口点。

¥Start by creating a provider directory for writing the provider plugin in TypeScript and add a provider.plugin.js file in the project root, which will be the plugin's entry point.

1

Create a provider/tsconfig.json file

provider/tsconfig.json
{
  "extends": "expo-module-scripts/tsconfig.plugin",
  "compilerOptions": {
    "outDir": "build",
    "rootDir": "src"
  },
  "include": ["./src"],
  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
}

2

Create a provider/src/index.ts file for your plugin

provider/src/index.ts
import { BuildCacheProviderPlugin } from '@expo/config';

const plugin: BuildCacheProviderPlugin {
  resolveBuildCache: () => {
    console.log('Searching for remote builds...')
    return null;
  },
  uploadBuildCache: () => {
    console.log('Uploading build to remote...')
    return null;
  },,
};

export default plugin;

3

Create an provider.plugin.js file in the root directory

provider.plugin.js
// This file configures the entry file for your plugin.
module.exports = require('./provider/build');

4

Build your provider plugin

At the root of your project, run npm run build provider to start the TypeScript compiler in watch mode.

5

Configure your example project to use your plugin by adding the following line to the example/app.json file:

example/app.json
{
  "expo": {
    ...
    "experiments": {
      "buildCacheProvider": {
        "plugin": "./provider.plugin.js"
      }
    }
  }
}

6

Test your provider

When you run the npx expo run command inside your example directory, you should see your plugin's console statements in the logs.

Terminal
cd example
npx expo run:ios

That's it! You now have a remote build cache provider to speed up your builds.

传递自定义选项

¥Passing custom options

要将自定义选项注入到插件中,你可以使用 options 字段,它将作为自定义函数的第二个参数转发。为此,请修改 example/app.json 中的 buildCacheProvider 字段,如下所示:

¥To inject custom options to your plugin you can use the options field and it will be forwarded as the second parameter of your custom functions. To do so modify the buildCacheProvider field in example/app.json as shown below:

example/app.json
{
  "expo": {
    ...
    "experiments": {
      "buildCacheProvider": {
        "plugin": "./provider.plugin.js",
        "options": {
          "myCustomKey": "XXX-XXX-XXX"
        }
      }
    }
  }
}