macOS Mojave で Typescript ファイルの中身を Quick Look で見れるようにする
macOS では Quick Look と呼ばれる機能により、Finder でファイルを選択した状態でスペースキーを押すとファイルによっては中身が表示されます。ですが TypeScript ファイル(拡張子が .ts /...
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を使用することができます。
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ファイルです。コピーしてきた中身を以下のように書き換えます。
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に以下を追加します。
compilerOptions
に以下を付け加えます
ng new
したときに作られるファイルそのものです。
ionic serve
やnpm run ionic:serve
して、好きなところで
enviornment.production
がtrue/false
にセットされているのが確認できます。
import
する際に相対パスでやってると後々大変なことになるので、エイリアスを使えるようにしましょう。Ionicでimportのエイリアスを追加するには、webpackの設定ファイルとTypeScriptの設定ファイルを両方いじる必要があります。なのでまずは「Ionicのソースコード内で開発環境と本番環境を切り替える」の手順にしたがって、webpack.config.jsonを用意します。そしてそこに
alias
に1行加えます。'@'
の部分がそれです。
次はTypeScriptの設定に手を加えます。プロジェクトのトップディレクトリにあるtsconfig.jsonのcompilerOptions
に以下を付け加えます
Typescript Error
Cannot find name 'SomeService'.
というようにTypeScriptでエラーが出ます。逆にtsconfig.jsonにパスを追加してwebpack.config.jsonにエイリアスを追加するのを忘れるとランタイムエラー
Runtime Error
Uncaught (in promise): Error: Cannot find module "@/app/core/services/some-service" ...
で怒られてしまいます。
ng new
しただけではwebpack.config.jsは存在しませんが、ng eject
することでトップディレクトリにwebpack.config.jsを吐き出すことができます。これとtsconfig.jsonに上記の項目を追加すると同じようにモジュールの読み込みにエイリアスを使うことができます。