shion のアバター画像もくもくログページ一覧ブログ一覧技術メモ一覧ライセンス表記利用規約外部リンクconnpassGitHubSpeaker DeckTwitter[工事中]Shion のもくログバージョン1.2.5

もくもくログ

主にIT 関連のメモをもくもくと綴っていきます

この記事の情報は古い可能性があります
最終更新日:2020/05/04 07:04:51
自分好みのIonic 5 の初期構成をスクリプト化してみたAngularCapacitorIonic

Ionic プロジェクト作成する際、毎回何かしらの手を加えています。
今回それをスクリプト化してみました。

変更点

  • Angular アップデート
  • Capacitor 設定の整備
  • EditConfig の追加
  • gitignore の更新
  • Visual Studio Code 設定の追加
    • エディター外見の変更
      → プロジェクトを見分けやすくするため
    • 拡張機能の推奨設定を追加
    • Chrome デバッグ設定の追加
      → 止める際はデバッグ停止後、ターミナルで実行中のserve も停止する必要があるので注意

スクリプト

Ionic:

   Ionic CLI : 6.7.0

Utility:

   cordova-res (update available: 0.14.0) : 0.13.1
   native-run                             : 1.0.0

System:

   NodeJS : v12.4.0
   npm    : 6.9.0
   OS     : macOS Catalina

上記環境で下記スクリプトをbash で実行し、動作確認しました。

#!/bin/sh

# 前提
# * @ionic/cli がグローバルインストールされている
# * git コマンドが使える
# * Visual Studio Code で開発する
# * yarn コマンドが使える

# 変数定義
appName=XAppRecipe
pkgName=work.shion.xapprecipe

# Ionic アプリの追加
ionic start $appName blank --no-deps --no-git --no-interactive --type=angular
cd $appName

# Editor 関連設定の整備
cat > .editorconfig << "EOF"
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
EOF
mkdir .vscode
cat > .vscode/extensions.json << "EOF"
{
    // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
    // List of extensions which should be recommended for users of this workspace.
    "recommendations": [
        "angular.ng-template",
        "donjayamanne.githistory",
        "eamodio.gitlens",
        "editorconfig.editorconfig",
        "github.vscode-pull-request-github",
        "ms-vscode.vscode-typescript-tslint-plugin",
        "msjsdiag.debugger-for-chrome",
        "pflannery.vscode-versionlens",
        "visualstudioexptteam.vscodeintellicode"
    ],
    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
    "unwantedRecommendations": []
}
EOF
cat > .vscode/launch.json << "EOF"
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug by chrome",
            "preLaunchTask": "Serve",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${workspaceFolder}/src/*"
            },
            "webRoot": "${workspaceFolder}"
        }
    ]
}
EOF
cat > .vscode/settings.json << "EOF"
{
    "workbench.colorCustomizations": {
        "statusBar.background": "#B32435",
        "statusBar.foreground": "#FFFFFF",
        "titleBar.activeBackground": "#B32435",
        "titleBar.activeForeground": "#FFFFFF"
    }
}
EOF
cat > .vscode/tasks.json << "EOF"
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Serve",
      "command": "ionic",
      "args": [
        "serve",
        "--host",
        "localhost",
        "--no-open",
        "--port",
        "8100"
      ],
      "isBackground": true,
      "problemMatcher": {
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".",
          "endsPattern": ".*Development server running!.*",
        },
        "pattern": [
          {
            "regexp": ".",
            "file": 1,
            "location": 2,
            "message": 3
          }
        ],
      },
      "type": "shell",
    }
  ]
}
EOF

# Capacitor 設定の整備
sed -i "" -e '/splash-screen/d' package.json
sed -i "" -e '/[sS]plashScreen/d' src/app/app.component.spec.ts
sed -i "" -e '/[sS]plashScreen/d' src/app/app.component.ts
sed -i "" -e '/SplashScreen/d' src/app/app.module.ts
sed -i "" -e '/status-bar/d' package.json
sed -i "" -e '/[sS]tatusBar/d' src/app/app.component.spec.ts
sed -i "" -e '/[sS]tatusBar/d' src/app/app.component.ts
sed -i "" -e '/StatusBar/d' src/app/app.module.ts
ionic integrations enable capacitor --package-id=$pkgName
npx cap init $appName $pkgName
sed -i "" -e 's/"bundledWebRuntime": false,/"bundledWebRuntime": true,/g' ./capacitor.config.json

# Angular アップデート
yarn ng update @angular/cli @angular/core

# Git 整備
cat > .gitignore << "EOF"
#################
### JetBrains ###
#################
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf

# Generated files
.idea/**/contentModel.xml

# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml

# Gradle
.idea/**/gradle.xml
.idea/**/libraries

# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn.  Uncomment if using
# auto-import.
# .idea/artifacts
# .idea/compiler.xml
# .idea/jarRepositories.xml
# .idea/modules.xml
# .idea/*.iml
# .idea/modules
# *.iml
# *.ipr

# CMake
cmake-build-*/

# Mongo Explorer plugin
.idea/**/mongoSettings.xml

# File-based project format
*.iws

# IntelliJ
out/

# mpeltonen/sbt-idea plugin
.idea_modules/

# JIRA plugin
atlassian-ide-plugin.xml

# Cursive Clojure plugin
.idea/replstate.xml

# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties

# Editor-based Rest Client
.idea/httpRequests

# Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser



#############
### Linux ###
#############
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*



#############
### macOS ###
#############
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk



###############
### Node.js ###
###############
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2

.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.pnp.*



##########################
### Visual Studio Code ###
##########################
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.code-workspace

# Local History for Visual Studio Code
.history/



###############
### Windows ###
###############
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk



################
### Projects ###
################
/platforms
/plugins
!/src/assets/icon
/www
EOF
git init
git add .
git commit -m "First commit"

参考文献

一覧に戻る