【 Ionic 入門】 Ionicで開発を進める際に知っておかないといけないこと
Ionicは英語のドキュメントがしっかりしている上にコミュニティもある程度大きいので、英語さえ読めればわからないことがあっても大抵解決します。ただ日本語の記事となると、情報が古かったりほんのさわりだけしかやってなくて本格的に使う際に知りたいことなんかはあまりない印象があります。ということでこの記事ではIonicで開発を進める際に知っておかないといけないことを順不同でまとめていきます。情報は随時更新していく予定です。
目次
Ionic のパッケージマネージャーとして npm ではなくて yarn を使う
Ionicはパッケージマネージャーとしてデフォルトでは npm を使用しますが、これを yarn に切り替えることができます。すべてのプロジェクトのデフォルトで yarn を使用したい場合は
ionic config set -g yarn trueで切り替わります。
また、yarn を含めた Ionic のグローバルな設定は ~/.ionic/config.json で定義されています。これがデフォルトの設定となります。この内容は
ionic config get -gで確認することができます。変更したい場合は上記のように set を使用します。
プロジェクト単位の設定は各プロジェクトのルートに入っている ionic.config.json です。ionic で CLI を走らせると、グローバルな ~/.ionic/config.json の設定を ionic.config.json で上書きすることになります。なので、デフォルトは npm であるプロジェクト内でのみ yarn を使用したい場合は、プロジェクトディレクトリ内で
ionic config set yarn trueとすることで、そのプロジェクト内でのみ yarn を使用することができます。
参考ページ
Ionicのソースコード内で開発環境と本番環境を切り替える
IonicがベースにしているAngularでは ng new すると、開発環境と本番環境を切り替えるための src/environments/environment.ts と src/environments/environments.prod.ts がもれなくついてきますが、Ionic で ionic start しても src/environments はついてきません。Ionic でこれらのファイルで環境を切り替えられるようにするには、webpack の設定に少しだけ手を加えます。
まずはプロジェクトディレクトリのルートへ移動し、node_modules/@ionicからwebpack.config.js をコピーしてきます。
cp node_modules/\@ionic/app-scripts/config/webpack.config.js ./コピー元のファイルが Ionic がデフォルトで使用している webpack 用の config ファイルです。コピーしてきた中身を以下のように書き換えます。
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
var env = process.env.IONIC_ENV === 'prod' ? 'environment.prod.ts' : 'environment.ts';
useDefaultConfig.resolve.alias = {
'@app/environment': path.resolve(__dirname, './src/environments/', env),
};
return useDefaultConfig;
}やっていることは単純で、デフォルトのwebpack.config.jsを読み込んだ後、alias に @app/environment を追加しています。alias が示す先はこれから作る src/environments 以下の環境設定用ファイルです。
コードの中に process.env.IONIC_ENV というのがありますが、これは Ionic が、というか Ionic App Script が Nodeのprocess.env にセットしてくれているプロパティの一つです。その他のプロパティの一覧は Github ページ に載っています。
次は package.json の変更です。コピーしてきた webpack.config.js を Ionic に教えるために package.json に以下を追加します。
// package.json
...
"config": {
"ionic_webpack": "./webpack.config.js"
},
...これで webpack.config.js の読み込み元を上書きしてくれます。
tsconfig.json も修正する必要があります。プロジェクトのトップディレクトリにあるtsconfig.jsonの compilerOptions に以下を付け加えます
{
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"@app/environment": ["environments/environment.prod.ts", "environments/environment.ts"]
}
},
...
}最後に environment ファイルを作成します。以下の2つのファイルを src/environments につくってください。中身は Angular の CLI で ng new したときに作られるファイルそのものです。
// src/environments/environment.ts
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false
};// src/environments/environment.prod.ts
export const environment = {
production: true
};以上で準備完了です。あとは ionic serve や npm run ionic:serve して、好きなところで
import { environment } from "@app/environment";すると enviornment.production が true/false にセットされているのが確認できます。
importで相対パスではなくエイリアスを使う
import する際に相対パスでやってると後々大変なことになるので、エイリアスを使えるようにしましょう。Ionic で import のエイリアスを追加するには、webpack の設定ファイルと TypeScript の設定ファイルを両方いじる必要があります。なのでまずは「Ionic のソースコード内で開発環境と本番環境を切り替える」の手順にしたがって、webpack.config.js を用意します。そしてそこに
// webpack.config.js
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
var env = process.env.IONIC_ENV === 'prod' ? 'environment.prod.ts' : 'environment.ts';
useDefaultConfig.resolve.alias = {
'@app/environment': path.resolve(__dirname, './src/environments/', env),
'@': path.resolve(__dirname, './src'),
};
return useDefaultConfig;
}のように alias に1行加えます。'@' の部分がそれです。
次は TypeScript の設定に手を加えます。プロジェクトのトップディレクトリにある tsconfig.json の compilerOptions に以下を付け加えます
{
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}
},
...
}設定は以上です。これで
import { SomeService } from '@/providers/some-service/some-service';のように src ディレクトリを起点としたモジュールの読み込みができるようになります。
どちらかに追加し忘れた場合のエラー内容
ちなみに、webpackの方にエイリアスを追加して、tsconfig.jsonにパスを追加するのを忘れると
Typescript Error
Cannot find name 'SomeService'.というように TypeScript でエラーが出ます。逆に tsconfig.json にパスを追加して webpack.config.js にエイリアスを追加するのを忘れるとランタイムエラー
Runtime Error
Uncaught (in promise): Error: Cannot find module "@/app/core/services/some-service" ...で怒られてしまいます。
Angular CLIを使ったAngularアプリの場合
この手順は Angular でも同様です。Angular の場合は ng new しただけでは webpack.config.js は存在しませんが、ng eject することでトップディレクトリに webpack.config.js を吐き出すことができます。これと tsconfig.json に上記の項目を追加すると同じようにモジュールの読み込みにエイリアスを使うことができます。