使用构建缓存提供程序

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


构建缓存是一项通过基于项目 指纹 在远程缓存构建来加快 npx expo run:[android|ios] 的功能。 当你运行 npx expo run:[android|ios] 时,它会检查是否存在具有匹配指纹的构建,然后下载并启动该构建,而不是再次编译它。否则,项目将像往常一样进行编译,然后生成的二进制文件会上传到远程缓存,以便将来使用。

🌐 Build caching is a 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 --dev
Terminal
npx expo install eas-build-cache-provider "--" --dev

然后,更新你的 app.json 以包含 buildCacheProvider 属性及其提供者:

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

app.json
{ "expo": { "buildCacheProvider": "eas" %%placeholder-start%%... %%placeholder-end%% } }

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

🌐 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; };

可以在 Build Cache Provider Example 中找到使用 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

首先创建一个 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

创建一个 provider/tsconfig.json 文件

🌐 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

为你的插件创建一个 provider/src/index.ts 文件

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

provider/src/index.ts
import { type BuildCacheProviderPlugin } from '@expo/config'; const plugin: BuildCacheProviderPlugin = { resolveBuildCache: async () => { console.log('Searching for remote builds...'); return null; }, uploadBuildCache: async () => { console.log('Uploading build to remote...'); return null; }, }; export default plugin;

3

在根目录中创建一个 provider.plugin.js 文件

🌐 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

在你的项目根目录下,运行 npm run build provider 来以监视模式启动 TypeScript 编译器。

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

5

通过将以下行添加到 example/app.json 文件中,将你的示例项目配置为使用你的插件:

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

example/app.json
{ "expo": { %%placeholder-start%%... %%placeholder-end%% "buildCacheProvider": { "plugin": "./provider.plugin.js" } } }

6

测试你的服务提供商

🌐 Test your provider

当你在 example 目录中运行 npx expo run 命令时,你应该能在日志中看到插件的控制台输出。

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

Terminal
# Navigate to the example directory
cd example

# Run the example on Android
npx expo run:android

# Run the example on iOS
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": { %%placeholder-start%%... %%placeholder-end%% "buildCacheProvider": { "plugin": "./provider.plugin.js", "options": { "myCustomKey": "XXX-XXX-XXX" } } } }