はじめに

androidアプリを開発するのにCordovaを利用していて、webpackを組み合わせて構築するときのメモです。Windows10環境で構築しました。コードの構文チェックにESLint,パッケージ管理にnpm,バージョン管理にgitを利用します。

事前準備

• 下記をあらかじめインストールしておきます。

  • android-sdk
  • git
  • npm
  • cordova
  • eslint-cli

• プロジェクト名を決めます。
  すべて小文字にするとよいです。以下test_projectとします。

構築手順

1.cordovaディレクトリの作成

プロジェクトを作成したいディレクトリで下記コマンドを実行
> cordova create test_project io.cordova.test_project test_project
test_projectという名前のディレクトリとともにcordovaの各ファイルが作成されます。

2.npm,gitの初期化

プロジェクトルート(test_projectディレクトリ)で下記コマンドを実行
> npm init
> git init

3.各npmパッケージのインストール

プロジェクトルート(test_projectディレクトリ)で下記コマンドを実行
> npm install --save-dev eslint
> npm install --save-dev webpack webpack-cli

babelを利用するので下記もインストール
> npm install --save-dev babel-core babel-loader babel-preset-es2015

webpack用の各種loaderもインストール
> npm install --save-dev html-loader postcss-import postcss-loader css-loader style-loader svg-inline-loader

4.ESLintの設定

プロジェクトルート(test_projectディレクトリ)で下記コマンドを実行
> eslint --init

対話的に設定項目を聞かれるので、下記で設定
Use a popular style guide
Standard
JSON

5.babelの設定

プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

{
  "presets": ["es2015"]
}

6.gitignoreの設定

プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

node_modules/
hooks/
platforms/
www/js/index.js

7.webpackの設定

プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

module.exports = {
　mode: 'development'
  entry: './www/src/entry.js',
  output: {
    path: __dirname + '/www/js',
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      },
      {
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {loader: 'svg-inline-loader', options: {removeTags: true,removingTags:["sodipodi:namedview"]}}
        ]
      }
    ]
  }
};

8.postcss-loaderの設定

プロジェクトルート(test_projectディレクトリ)に下記ファイルを作成

module.exports = {
  plugins: {
    'postcss-import': {},
  }
}

9.npm runの設定

すでに作成されているpackage.jsonのscript節を下記に編集

(省略)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cordova": "cordova",
    "webpack": "webpack",
    "start": "webpack & cordova build & cordova run browser",
    "android": "webpack & cordova build & cordova run android"
  },
(省略)

webpackやcordovaのコマンドはnpm runを利用すると各プロジェクトローカルに保存されたものをPATHを通さなくても利用できる。

10.ESLintの設定

すでに作成されている.eslintrc.jsonを下記に編集

{
    "extends": "standard",
    "env": {"browser": true,"es6": true}
}

11.cordovaのプラットフォーム追加

プロジェクトルート(test_projectディレクトリ)にて下記コマンド実行。
cordova platform add browser
cordova platform add android

12.Content-Security-Policyの変更(不要であればスキップ)

cordovaで外部APIを叩くときにContent-Security-Policyが邪魔するときがあるので変更する。

cordovaのwwwディレクトリにあるindex.html(test_project/www/index.html)を編集

下記をコメントアウト(もしくは削除)し

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

下記を追加

<meta http-equiv="Content-Security-Policy" content=""/>

13.srcディレクトリの作成

cordovaのwwwディレクトリ(test_project/www)で下記コマンドを実行
> mkdir src
以後はすべてこのディレクトリ(test_project/www/src)で作業する。

14.entry.htmlの作成

srcディレクトリにentry.htmlを作成する。

中身は自由に書く。
ここに書いたhtmlが直接bodyタグに埋めこまれる。

15.entry.cssの作成

srcディレクトリにentry.cssを作成する。

中身は自由に書く。
npmパッケージのcssを利用するときは下記のように書く

@import  "..\..\node_modules\[パッケージ名]\[cssファイル名]";

16.entry.jsの作成

srcディレクトリにentry.jsを作成する。
個人的なひな形は下記

class App{
  requireEachFiles(){
    document.body.innerHTML = require('./entry.html')
    require('./entry.css')
  }
  addEventListenerToEachElement(){
  }
  initialize () {
    this.requireEachFiles()
    this.addEventListenerToEachElement()
  }
}
document.addEventListener('DOMContentLoaded', () => {
  const app = new App()
  app.initialize()
})

実行

基本的にnpmで実行する
ブラウザで実行する場合
> npm start
androidで実行する場合
> npm run android