CordovaをReact + TypeScriptで開発できるようにする

Cordovaの環境は作れましたが、このままではJavaScriptを生で書いていくことになります。

ので、ReactとTypeScriptを使えるようにしたいと思います。

 

今回使うのは、前の記事で紹介したcreate-react-appを利用します。

kenteiblog.hatenablog.com

 

手順は以下のとおりです。
(Cordovaの環境はすでに設定済みであると想定して話を進めます。環境を作っていない方は以下を参考にしてみてください)

kenteiblog.hatenablog.com

kenteiblog.hatenablog.com

 

1. Cordova開発環境のルートディレクトリにコマンドプロンプト(またはターミナル)で移動します。

⇒以前の記事と同様の方法で開発環境を作っているならば、「testFolder」というのがカレントディレクトリにあたります。今後の説明もそのディレクトリであると仮定して進めます。

 

2. 以下のコマンドでreact開発環境を作ります。

create-react-app src --scripts-version=react-scripts-ts  

 コマンドを実行すると、カレントディレクトリにsrcフォルダができます。

 

3. srcフォルダ内のpakage.jsonに「"homepage": "."」というプロパティを追記します。

<入力例>

 {
    "name": "src",
    "version": "0.1.0",
    "private": true,
    "homepage": ".",
    "dependencies": {

 

4. src/publicフォルダ下のindex.htmlにcordova.jsのリンクを追加します。

 <script type="text/javascript" src="cordova.js"></script>

 

5. npm run buildをたたいて一旦ビルドします。

 

6. カレントディレクトリに戻り、wwwフォルダをwww.bakフォルダに改名します。

 

7. シンボリックリンクを作ります。

コマンドプロンプトの場合】

mklink /d www src\build

【ターミナルの場合】

ln -s src/build/ www

 

8. cordova run android または cordova run ios でエミュレーター実行します。

 

以下のような感じになれば成功です。

f:id:kentei0715:20171217232924p:plain

 

本当に簡単にReact環境はできるようになりましたね(^^)/ 

 

以上です。

2017/12/18 賢帝俊来