新しいブランチを作成します。
推奨ですが、必須ではありません。
cd my-app
git checkout -b cap-migrationCordova to Capacitor Migration
A modern development experience and 99% backward-compatibility with Cordova.
Capacitorをインストール。
`config.xml` にあるCordovaアプリの名前とIDを使用して Capacitorアプリを作成します。
npm install @capacitor/cli @capacitor/core
npx cap init [name] [id]Webアプリをビルドします。
コンパイルされたWebアセットは、 次のステップでCapacitorの各ネイティブプラットフォームにコピーされます。
# Most web apps
npm run build
# Ionic app
ionic buildターゲットにするネイティブプラットフォームをインストール。
Capacitorネイティブプロジェクトは独自の最上位フォルダーに存在し、アプリの一部と見なされます （ソース管理にチェックインします）。 既存のCordovaプラグインは、各ネイティブプロジェクトに 自動的にインストールされます。🎉
npx cap add android
npx cap add iosスプラッシュスクリーンとアイコンの再作成。
`cordova-res` ツールを使用して、Cordovaプロジェクトの最上位の `resources` フォルダにある 既存のスプラッシュスクリーン/アイコン画像を再利用します。 画像は各ネイティブプロジェクトにコピーされます。
npm install -g cordova-res
cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy既存のCordovaプラグインを監査。
すべてのCapacitorの コア と コミュニティ プラグインをご確認ください。 Cordovaと同等のCapacitorプラグインに 切り替えることができる場合があります。
不要なものを削除して、パフォーマンスを向上させ、アプリのサイズを小さくします。
import { Camera } from '@ionic-native/camera/ngx';
constructor(private camera: Camera) {}
const photo = await this.camera.getPicture({
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
allowEdit: true,
saveToPhotoAlbum: true
});import { Camera } from '@capacitor/camera';
const photo = await Camera.getPhoto({
quality: 100,
resultType: CameraResultType.Uri,
allowEditing: true,
saveToGallery: true
});プロジェクトからCordovaを削除。
移行テストが成功したら、Cordovaをプロジェクトから 削除できます。
# Remove a Cordova plugin
npm uninstall cordova-plugin-name
npx cap sync
# Delete Cordova folders and files
rm config.xml
rm -R platforms/
rm -R plugins/Capacitorの旅を続けよう。
これははじまりにすぎません。続いて、 Cordovaプラグインを Capacitorで使う方法と、Capacitorの 開発フロー や 自分自身の ネイティブプラグイン をつくったりしましょう。
# Install a Cordova plugin
npm install cordova-plugin-name
npx cap sync
# Create a custom plugin
npm init @capacitor/pluginMore Resources
Explore these resources to learn more about Capacitor
and make your Cordova migration easier.
