升级至 v2

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

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

Note

新功能

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

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

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

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

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

升级流程

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

Note

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

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

1// Import with old path
2- import {getAssetUrl} from 'pwa-kit-react-sdk/dist/ssr/universal/utils'
3
4// Import with new path
5+ import {getAssetUrl} from 'pwa-kit-react-sdk/ssr/universal/utils'

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

对 package.json 的更改

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

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

1"pwa-kit-dev": "2.0.0",
2"pwa-kit-react-sdk": "2.0.0",
3"pwa-kit-runtime": "2.0.0",

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

1"@babel/cli": "^7.4.4",
2"@babel/core": "^7.4.5",
3"@babel/parser": "^7.5.5",
4"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
5"@babel/plugin-transform-async-to-generator": "^7.7.0",
6"@babel/plugin-transform-modules-commonjs": "^7.4.4",
7"@babel/plugin-transform-object-assign": "^7.2.0",
8"@babel/plugin-transform-runtime": "^7.6.2",
9"@babel/preset-env": "^7.4.5",
10"@babel/preset-react": "^7.0.0",
11"@babel/register": "^7.4.4",
12"@babel/runtime": "^7.7.2",
13"@babel/runtime-corejs2": "^7.4.5",
14"@babel/traverse": "^7.5.5",
15"babel-eslint": "^10.1.0",
16"babel-jest": "^26.6.3",
17"babel-loader": "^8.0.6",
18"babel-plugin-dynamic-import-node-babel-7": "^2.0.7",
19"babel-plugin-formatjs": "^10.2.3",
20"@loadable/babel-plugin": "^5.13.2",
21"@loadable/server": "^5.15.0",
22"@loadable/webpack-plugin": "5.15.0",
23"eslint": "7.31.0",
24"eslint-config-prettier": "4.0.0",
25"eslint-import-resolver-webpack": "0.10.0",
26"eslint-plugin-header": "^3.1.1",
27"eslint-plugin-import": "2.23.4",
28"eslint-plugin-jsx-a11y": "6.4.1",
29"eslint-plugin-prettier": "3.0.1",
30"eslint-plugin-react": "7.24.0",
31"jest": "^26.6.3",
32"jest-cli": "^26.6.3",
33"webpack": "^5.39.1",
34"webpack-cli": "^4.7.2"

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

1"scripts": {
2    ...
3    "format": "pwa-kit-dev format '\"**/*.{js,jsx}\"'",
4    "lint": "pwa-kit-dev lint '\"**/*.{js,jsx}\"'",
5    "prod:build": "npm run build-translations && pwa-kit-dev build",
6    "push": "npm run prod:build && pwa-kit-dev push",
7    "save-credentials": "pwa-kit-dev save-credentials",
8    "start": "cross-env NODE_ICU_DATA=node_modules/full-icu pwa-kit-dev start",
9    "test": "pwa-kit-dev test",
10    ...
11},

对 babel.config.js 的更改

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

1module.exports = require('pwa-kit-dev/configs/babel/babel-config')

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

对 webpack.config.js 的更改

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

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

1const config = require('pwa-kit-dev/configs/webpack/config')
2
3// Add your customizations here
4const clientConfig = config.find((cnf) => cnf.name === 'client')
5
6module.exports = config

对 ssr.js 的更改

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

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

1- import {createApp} from 'pwa-kit-react-sdk/ssr/server/express'
2+ import {getRuntime} from 'pwa-kit-runtime/ssr/server/express'
3
4const options = {
5    // For example, if you have a different build directory, make sure this buildDir is correct
6    buildDir: path.resolve(process.cwd(), 'my-build-dir'),
7    ...
8}
9
10- const app = createApp(options)
11+ const runtime = getRuntime()
12
13const {handler} = runtime.createHandler(options, (app) => {
14    ...
15    // For example, if you have added a custom endpoint, you can bring its implementation to here
16    app.get('/custom-endpoint', () => {})
17
18    app.get('*', runtime.render)
19})
20// SSR requires that we export a single handler function called 'get', that
21// supports AWS use of the server that we created above.
22export const get = handler

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

1import bodyParser from 'body-parser'
2
3const {handler} = runtime.createHandler(options, (app) => {
4  // add this before the custom endpoints which access `req.body`
5  app.use(bodyParser.json())
6})

以不同方式导入 getConfig

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

1- import {getConfig} from 'pwa-kit-react-sdk/ssr/universal/utils' // Old package
2+ import {getConfig} from 'pwa-kit-runtime/utils/ssr-config' // New package

对 worker/main.js 的更改

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

1// Place your Workbox route configurations here, eg:
2// workbox.routing.registerRoute(...)
3
4// Never cache dev-server internals.
5workbox.routing.registerRoute(
6  /^http:\/\/localhost:3000\/__mrt/,
7  new workbox.strategies.NetworkOnly()
8)

代理设置

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

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

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

Node 14 支持

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

测试更改

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

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