LoginSignup
4

More than 5 years have passed since last update.

AngularJS + Onsen UI 2 + Webpack2 (+ PhoneGap) のサンプル作ってみた

Last updated at Posted at 2017-01-25

Onsen UI 2 + AngularJSでアプリを作っている人ってどれぐらいいるのでしょうか?

Onsen UIの公式ブログではReact(と最近はVueかな?)が人気っぽいですね。
ES2015やWebpackといった新しいフロントエンド技術も出てきて大変勉強になります。

でも、あれ?AngularJSは?

ES2015とWebpackや組み合わせている例をあまり見かけないような...?

今回のサンプル

というわけで作ってみました。

ES2015/ES2016とSCSS/cssnextをサポートしています。Webpackのバージョンは2.x系です。

必要なもの

これだけ。Node.jsだけあれば良いです。

エディタはAtomVisual Studio Codeを推奨。

プログラミング初心者、あるいは今後TypeScript化を考えているなら後者の方が良いかも?

使い方

リポジトリをクローン

$ git clone https://github.com/puku0x/angular-onsenui2-webpack2.git

依存ライブラリをインストール

$ cd クローン先のディレクトリ
$ npm i

インストール時に管理者権限のエラーが出たときは sudo npm install としてください。

Yarnを使っている人はnpmの部分をyarnに置き換えてください。

ビルド&プレビュー実行

$ npm start

ビルド後、ブラウザで http://localhost:3000 を開くとプレビューされます。
もちろんPhoneGap Developerアプリもそのまま使えます。

仕組み

ES2016とSCSSのトランスパイルにはWebpack2を採用しました。
Webpack自体の使い方はいろんな人が情報出してくれてるのでググればなんとかなるかと。

webpack.config.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env) => {
  // プラグイン設定
  const plugins = [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js'
    }),
    new ExtractTextPlugin({
      filename: "bundle.css",
      allChunks: true
    })
  ];

  return {
    entry: {
      app: './src/js/app.js',
      vendor: ['angular', 'onsenui'],
    },
    output: {
      path: path.join(__dirname, '/www/assets'),
      filename: 'bundle.js',
    },
    devtool: 'inline-source-map',
    plugins,
    module: {
      rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader']
        })
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      }, {
        test: /\.(otf|eot|svg|ttf|woff|woff2)(\?.+)?$/,
        use: 'file-loader'
      }, {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: ['babel-loader']
      }
      ]
    }
  };
};

PhoneGapがデフォルトで/wwwをウォッチしていることを利用し、Webpackの出力先を/www/assetsに設定することでビルド→プレビューの連携を実現しています(index.htmlassets/bundle.jsassets/vendor.bundle.jsassets/bundle.cssを読み込むようにしています)。

Webpack2ではng-annotate-loaderが上手く動かないので、Babelプラグインを使って解決しています。

.babelrc
{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "es2016"
  ],
  "plugins": [
    "angularjs-annotate"
  ]
}

package.jsonのスクリプトは以下の通りです。

"scripts": {
  "build": "webpack --progress --color -p",
  "webpack": "webpack --progress --color --watch",
  "serve": "phonegap serve",
  "start": "concurrently \"npm run webpack\" \"npm run serve\""
}

npm startと打つと、WebpackのビルドとPhoneGapサーバの起動が並列実行されます。

問題点

  • Onsen UI 2 が 最新版 だとうまく動かない
    最新版の 2.0.5 ではページ引数が一つ前のものになるバグがあります。
    また、 RC.18 以降ではons-template内のデータバインディングが機能しないバグもあります。 ons-initを使うことで解決。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4