cordova + onsen ui + reactの開発環境

cordova + onsen ui + reactの開発環境を作成してみます。cordovaのテンプレートにして、メンテしていければと思います。環境は、windows10、npm3.10.8です。エディタは、visual studio code1.6.1を使ってます。

プロジェクトを作る

npmはインストール済みです。

$ cd　どこか
$ mkdir cordova
$ cd cordova
$ npm i -g cordova
$ cordova create hoge
$ cd hoge

必要なものをnpm install

下記のpackage.jsonを配置して、npm installを実行。

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "onsenui": "^2.0.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-onsenui": "^1.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.5.1",
    "babel": "^6.5.2",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-import": "^2.0.1",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.4.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "postcss-loader": "^1.0.0",
    "precss": "^1.4.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.3.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }
}

$ npm i

git

$ git init
$ code .gitignore

.gitignoreを編集

node_modules
.vscode
platforms
plugins

cordovaにプラットフォーム追加

$ cordova platform add ios --save
$ cordova platform add android --save

babelの設定

$ code .babelrc

.babelrcを編集

{
  "presets": ["es2015", "react"]
}

eslintの設定

$ code .eslintrc

.eslintrcの編集

{
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        "import/no-extraneous-dependencies": 0,
        "class-methods-use-this": 0,
        "import/no-unresolved": 0
    },
    "env": {
        "browser": true,
        "node": true
    }
}

.eslintignoreの設定

node_modules
webpack.config.js

webpackの設定

元となるjsを入れるフォルダを作る

$ mkdir src

$ code webpack.config.js

webpack.config.jsの編集

var path = require('path');
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
var precss = require('precss');
var autoprefixer = require('autoprefixer');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    './src/main'
  ],
  output: {
    path: './www',
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: './www',
    port: 8080,
  },
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'eslint',
      },
    ],
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel',
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.styl$/,
        loader: 'style!css!postcss!stylus'
      },
      {
        test: /\.css$/,
        exclude: path.join(__dirname, 'src'),
        loader: ExtractTextWebpackPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: path.join(__dirname, 'src'),
        loader: 'raw'
      },
    ],
  },
  resolve: {
    root: [
      path.join(__dirname, 'src'),
      path.join(__dirname, 'node_modules'),
    ],
    extensions: ['', '.js', '.jsx', '.json', '.css', '.html', '.styl'],
    unsafeCache: true,
  },
  postcss: function() {
    return [precss, autoprefixer];
  },
  plugins: [
    new ExtractTextWebpackPlugin('[name].css'),
  ],
};

index.htmlの作成

www/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <link href="./main.css" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

Javascriptの作成

onsen ui + reactを使った簡単なjavascriptを作成してみる。

src/App.jsx

import React from 'react';
import { Page, Button } from 'react-onsenui';
import { notification } from 'onsenui';

export default class App extends React.Component {
  alertPopup() {
    notification.alert('こんにちは');
  }

  render() {
    return (
      <Page>
        <div>Hello World!</div>
        <Button onClick={this.alertPopup}>クリック</Button>
      </Page>
    );
  }
}

src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

require('onsenui/stylus/blue-basic-theme.styl');
require('onsenui/css/onsenui.css');

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

webpackする

webpackすると、www内に、assetsと、bundle.jsと、main.cssが出力される。

$ webpack

webpack-dev-serverを使う

webpack-dev-serverを使っていると、ウォッチしてくれて、対象ファイルに変更があると、webpackしなおして表示してくれる。 webpackした結果は、メモリに保存されるので、www内への展開はされない。

$ npm run start

Androidの実機で確認する

$ cordova run android