Grommet コトハジメ

日時:	2016-09-11
作:	@voluntas
バージョン:	0.0.0
URL:	https://voluntas.githu.io/

突っ込みは Twitter @voluntas まで。

概要

HP エンタープライズが開発している React.js の UI フレームワーク。エンタープライズ向けといっているだけあってかっこよさよりシンプルさが優先されている。コンポーネントはかなりの種類ある。

開発理由に UI の統一というのがあるらしい。HPE の製品ごとにいろいろなデザインの UI があってわかりにくいということらしい。

シンプルなのと、管理画面向けに作られているフレームワークということで、手を出してみることにした。

参考

準備

インストールしていなければ -g で:

$ sudo npm install -g webpack \
                      webpack-dev-server

適当にまずは作ってしまう:

$ npm init -y

依存最低限:

$ npm install --save grommet \
                     react \
                     react-dom

開発のみ:

$ npm install --save-dev babel-preset-react \
                         babel-loader \
                         babel-core \
                         babel-preset-es2015 \
                         css-loader \
                         node-sass \
                         sass-loader \
                         style-loader \
                         file-loader \
                         webpack

webpack.config.js

Grommet は CSS などが自由にカスタマイズできるらしくその辺りに手を入れる必要がある。設定ファイルがやけに大きくなるが、これが必要最低限なはず。

var webpack = require('webpack');

module.exports = {
    devtool: "eval",

    entry: {
        js: "./src/index.js",
        html: "./index.html",
    },

    output: {
      path: "./dist",
      filename: "./bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.scss', '.css']
    },
    plugins: [
            new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ],
    module: {
      loaders: [
          {
              test: /\.html$/,
              loader: "file?name=[name].[ext]"
          },
          {
              test: /\.js$/,
              loader: "babel-loader",
              exclude: /node_modules/,
              query: {
                  presets: ["es2015", "react"]
              }
          },
          {
              test: /\.scss$/,
              loader: 'style!css!sass?outputStyle=compressed'
          }
      ]
    },
    sassLoader: {
      includePaths: [
        './node_modules',
      ]
    }
};

最小限構成

packge_json:

{
  "name": "grommet-dojo",
  "dependencies": {
    "grommet": "^0.6.11",
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^3.9.3",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2"
  }
}

フォルダ構成

- grommet-dojo
  - node_modules/
  - index.html
  - package.json
  - webpack.config.js
  - src/
    - components/
      - Content.js
    - index.js

index.html

<html>
    <head>
        <title>Grommet Dojo</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="content">Content</div>
        <script src="bundle.js" charset="utf-8"></script>
    </body>
</html>

index.js

一番上で CSS をインポートしてる

import 'grommet/scss/vanilla/index';

import React from 'react';
import ReactDOM from 'react-dom';

// http://grommet.github.io/docs/app
import App from 'grommet/components/App';
// http://grommet.github.io/docs/header
import Header from 'grommet/components/Header';
// http://grommet.github.io/docs/title
import Title from 'grommet/components/Title';

import Content from './components/Content.js';

ReactDOM.render(
    <App inline={true}>
        <Header>
            <h3>Hello, Grommet!</h3>
            <Title>
                Hello, Grommet!
            </Title>
        </Header>
        <Content />
    </App>,
    document.getElementById('content')
);

components/Content.js

import React from 'react';

// http://grommet.github.io/docs/button
import Button from 'grommet/components/Button';


export default class App extends React.Component {
    render() {
        return (
            // ボタンを追加する
            <Button label="Hello, Grommet." onClick={true} />
        );
    }
}

動かす

$ webpack-dev-server --progress --color

http://localhost:8080/webpack-dev-server/

パッケージング

$ webpack --optimize-minimize
Hash: 22d85663653bf3b6d348
Version: webpack 1.13.2
Time: 18148ms
      Asset       Size  Chunks             Chunk Names
 index.html  229 bytes          [emitted]
./bundle.js    1.69 MB    0, 1  [emitted]  html, js
    + 330 hidden modules

voluntas/grommet.rst