升级至 v2

升级在 PWA Kit v2 之前生成的项目,以利用 v2 中的框架和工具改进。

升级不会自动从 Retail React App 模板添加任何新的网店功能,但您可以使用最新的 Retail React App 代码作为参考手动添加它们。

我们为 PWA Kit v2 添加了许多新功能,包括:

🥳 TypeScript 支持。构建工具现在默认支持 TypeScript,无需更新 Babel 或 Webpack 的配置文件。

🧰 **更新的****开发服务器**,支持服务器端的热重载,并可以在未来的版本中支持客户端的热重载。

🤓 名为pwa-kit-devAn all-new command-line tool(全新命令行工具),它与我们推荐的开发工具相捆绑,如 Webpack、Babel 和 Jest,以支持零配置项目模板。

🖌️ 为有兴趣使用 Managed Runtime 托管其他基于 Express 的应用程序(不仅仅是 Retail React App)的用户提供对非 React 应用程序的实验性支持

如果您尚未生成 PWA Kit 项目,请参阅快速入门指南以使用 v2 生成新项目。

我们使从 v1.5 到 v2 的升级过程尽可能简单,只需对少量现有项目文件进行更改。

如果您是从 v1.4(或更早版本)升级,则该过程与从 v1.5 升级相同,但多了一个步骤。更新所有涉及 pwa-kit-react-sdkimport 语句,使导入路径不再包含 dist/ 文件夹。

继续阅读以完成剩余的升级任务(适用于 v1.5 和 v1.4 用户)。

要开始升级过程,请从项目的根目录打开 package.json

添加并安装三个新 pwa-kit-* 软件包:

移除以下依赖项。现在,新 pwa-kit-dev 工具会为您处理这些依赖项。(如果版本号与您项目中的版本号不完全匹配,请将其删除。)

将这些 NPM 脚本转换为使用新的 pwa-kit-dev

从项目的根目录打开 babel.config.js用这一行替换整个文件

如果您对 Babel 配置进行了任何自定义,请在以下调用将自定义添加至 require() 函数。

如果您尚未从项目的根目录自定义 webpack.config.js 文件,请将其删除。系统会自动为您加载默认配置文件。

如果您确实有自定义,则必须先调用 require() 函数后添加它们以获取基本配置:

在 v2 中,用于创建 Express 服务器的方法已更改。createApp 方法已被弃用并替换为名为 getRuntime 的方法。

getRuntime 方法返回运行时对象。您可以使用 createHandler 方法创建 Managed Runtime 兼容的 lambda 处理程序。第二个参数是一个回调函数,允许您访问 Express 应用程序,从而可以自定义 Express 应用程序。例如,您可以使用回调函数来实现自定义端点。

在 v2 中,body-parser 库已从 Express 应用程序中删除。如果您有需要 req.body 解析和填充的自定义端点,请通过运行 npm install body-parser 来安装 body-parser 库并将主体解析器库包含在 ssr.js 中:

无论何时使用 getConfig,从新 pwa-kit-runtime 包中将其导入:

打开 worker/main.js 并添加此新路由:

在 v2 中,必须明确定义每个 Managed Runtime 环境的代理设置。在 v1 中,有一种回退机制,允许 Managed Runtime 环境使用与本地开发环境相同的代理设置。由于性能和维护问题,v2 项目不支持回退机制。

要了解如何使用 Runtime Admin 工具或 Managed Runtime API 为 Managed Runtime 环境配置代理设置,请参阅代理请求

您还可以利用 v2 中新的特定于环境的配置功能来配置 Managed Runtime 环境的代理设置。

在 v2 之前,PWA Kit 支持 Node 12.x。对于 v2,您必须确保您的代码适用于 Node 16.x。

要测试您的更改是否成功,请运行以下命令:

  1. npm start 验证应用程序是否能够在本地运行。
  2. npm run build 用于验证构建过程是否成功。
  3. npm run push(并通过 Runtime Admin 部署)以验证部署捆绑包是否成功。