将应用升级至 Capacitor 3.0
Capacitor 3 为生态系统带来了重要更新和令人兴奋的新功能。
将应用升级至 Capacitor 3 后,欢迎在此讨论区分享您的反馈意见。我们期待听到您的声音!💖
如果您是插件开发者,需要将插件升级至新版 Capacitor,请参阅Capacitor 插件升级指南。
需 NodeJS 12+
Node 8 已终止支持。Node 10 将于 2021 年 4 月 30 日终止支持。Capacitor 3 要求 NodeJS 12 或更高版本(推荐使用最新的 LTS 版本)。
Ionic CLI
如果您使用 Ionic CLI,官方对 Capacitor 3 的支持从版本 6.16.0 开始。建议通过 npm install -g @ionic/cli
升级至最新版本。
更新 Capacitor CLI 和核心库
npm install @capacitor/cli@latest-3 @capacitor/core@latest-3
支持 ES2017+
Capacitor 3 现在构建目标是 ES2017 环境,而非 ES5。插件模板也已更新为 ES2017,鼓励第三方插件也更新其构建目标。
除非您需要支持 IE11(Capacitor 官方不支持的浏览器),否则此变更不会影响您的应用。
TypeScript 3.8+
Capacitor 3 使用了需要 TS 3.8 或更高版本的新 TypeScript 语法。
Capacitor 配置变更
如果已安装 TypeScript 3.8+,您可以将 capacitor.config.json
迁移为类型化的 TypeScript 配置文件 capacitor.config.ts
。您仍可使用 .json
文件,但 TypeScript 配置文件能为团队提供更好的开发体验。以下是 Capacitor 测试应用中使用的 capacitor.config.ts
示例:
/// <reference types="@capacitor/local-notifications" />
/// <reference types="@capacitor/push-notifications" />
/// <reference types="@capacitor/splash-screen" />
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.capacitorjs.app.testapp',
appName: 'capacitor-testapp',
webDir: 'build',
plugins: {
SplashScreen: {
launchAutoHide: false,
},
LocalNotifications: {
smallIcon: 'ic_stat_icon_config_sample',
iconColor: '#CE0B7C',
},
PushNotifications: {
presentationOptions: ['alert', 'sound'],
},
},
};
export default config;
官方插件
所有插件已从 Capacitor 核心库中移除,并分别发布为独立的 npm 包。这有多方面原因(参见 #3227),核心团队确信这是正确的方向。您可以这样导入核心插件:
import { Camera } from '@capacitor/camera';
移除的任务、权限和相册插件
- 后台任务:该插件使用率低且功能不符合大多数开发者预期。核心团队将在未来重新设计后台功能。关注 #3032 获取更新。
- 权限:核心团队实现了替代方案(参见新权限 API),社区插件也可采用。
- 相册:这个未公开文档的 iOS 专属插件已被移除。建议使用
@capacitor-community/media
。
拆分辅助功能 应用和模态窗口插件
- 辅助功能
- VoiceOver 和 TalkBack 功能移至 屏幕阅读器
- 应用
- 模态窗口
迁移应用使用新的官方插件包
此变更需要您单独安装每个使用的插件:
- 在项目中搜索从
@capacitor/core
的Plugins
对象导入的核心插件 - 查找对应的插件文档,注意部分插件已被拆分
- 按照文档中的安装说明操作
- 将插件导入改为从插件包导入(参见插件导入)
- 遵循向后不兼容的插件变更中的说明
使用 Ionic 框架?
Ionic 框架使用了以下插件的 API: