Electron+React+Typescriptの開発環境を作る
Electron+React+Typescriptで何かWebアプリを作ってみたいという人のために、Electronで開発を始めるまでの過程を書いていこうと思います。
※2019/09/25追記
create-react-appがTypescriptをサポートしたことによってこのQiitaの記事は非推奨になったので最新の開発環境を作りたい場合はElectron+React+Typescriptの開発環境を作る・改をみてください。
事前準備
create-react-appをグローバルにインストールする。
npm install -g create-react-app
アプリ起動まで
アプリ作成
今回はTypescriptを使用するために、react-scripts-tsを使用しアプリを作成する。
npx create-react-app --scripts-version=react-scripts-ts [アプリ名]
※Could not create a project called "[アプリ名]" because of npm naming restrictions:
* name can no longer contain capital letters
このようなエラーが出た場合はアプリ名が悪いようなので先頭を小文字にするなどしてみるとエラーがなくなるはずです!
Electronの設定
yarn add --dev electron
yarn add foreman
https://github.com/csepulv/electron-with-create-react-app 内の下記ファイルを同じ場所にコピーする
Procfile
src/electron-starter.js
src/electron-wait-react.js
package.jsonを編集する
{
.
.
"homepage": "./",
"main": "src/electron-starter.js",
"scripts": {
.
.
"electron": "node_modules/.bin/electron .",
"dev" : "nf start -p 3000"
}
}
tslint.jsonに下記の"rules"を追加する
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"no-console": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"member-ordering": true,
"strict-boolean-expressions": false,
"jsx-boolean-value": false
},
"jsRules": {
"no-console": false
}
}
アプリ起動
yarn dev
最後に
yarn dev
今回は環境構築だけでしたが、これを用いてお天気アプリの作成も行いました。それに関してはElectron+React+Typescriptでお天気アプリを作るに書きました。
メモ程度ですが参考にしてください。
参考
Author And Source
この問題について(Electron+React+Typescriptの開発環境を作る), 我々は、より多くの情報をここで見つけました https://qiita.com/butachin/items/f8027bb7f6a4f01ad8e6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .