souki-paranoiastのブログ

地方都市でプログラマーをやっている人のブログ。技術ネタ以外も少し書く。メインの言語はJava。https://paranoiastudio-japan.jimdo.com/ に所属

【ES6+】React + Babelifyでブラウザで動くアプリをnpm scriptで環境構築 ②

前回はbrowserifyとbabelifyが動かせるところまで進めた。

今回は、CSS Modulesの導入についてまとめていく。

詳細は別に任せるが、CSS Modulesは要するに純粋なcssとして記述して、JS側でスコープの制御をやってしまおうというものである。

cssのスコープがグローバルしか存在しないために影響範囲の把握が難しいことと、cssのためのclassなのかjsのためのclassなのかとかそういった判断が不要になる利点がある。命名規則やコーディング規則でどうとでもできるが、まあこちらの方がソース的にはわかりやすいだろう。とはいえフロント側の知識はあまり無いのでメリットが全て拾えているかは不明。

CSS in JSという概念で、様々なアプローチがある模様。Free-Styleといったような機能拡張(?)のものもあるようだが、このCSS Modulesで事足りそうなイメージだったため今回はこれでいく。

github.com

$ npm install css-modulesify --save

この時点でこうなっているはず。

$ cat package.json
{
  "name": "s_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babelify": "^10.0.0",
    "browserify": "^16.2.3",
    "css-modulesify": "^0.28.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }
}

次に実際に使用できているかを確かめるために確認用ファイルを作成していく。ディレクトリは以下のイメージ。

|--bundle
|  |--bundle.js # ここは後でビルドをしたらできる
|  |--style.css # ここは後でビルドをしたらできる
|--css
|  |--component.css
|  |--index.css
|--index.html
|--index.js
|--MyClass.js
|--package.json
|--package-lock.json

概要としては

  • index.htmlで画面を構築(bundle配下を読み込む)。
  • cssディレクトリ配下はbundle/style.cssに集約される
  • index.jsがReactのエントリポイントで内部のimport文を参照して解決してくれる。集約されたものはbundle/bundle.jsに。

==index.html==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bundle/style.css">
</head>
<body>

<div id="render-id"></div>

</body>
<script src="./bundle/bundle.js"></script>
</html>

==index.js==

import ReactDOM from "react-dom";
import MyClass from "./MyClass";
import React from "react";

ReactDOM.render(<MyClass />, document.getElementById("render-id"));

==MyClass.js==

import React, {Component} from "react";
import styles from "./css/index.css";
import comp from "./css/component.css";

class MyClass extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div className={styles.outer}>
        <button className={comp["btn-info"]}>info</button>
        <button className={comp["btn-register"]}>register</button>
      </div>
    );
  }
}

export default MyClass;

==component.css==

.btn-info {
  background-color: #66c;
}

.btn-register {
  background-color: #c66;
}

==index.css==

.outer {
  background-color: #6c6;
}

.outer:hover {
  background-color: #6c9;
}

.outer::after {
  content: 'add content';
}

これらを用意して、以下のコマンドを発行すればOK

./node_modules/.bin/browserify index.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] -p [ css-modulesify -o bundle/style.css ]  -o bundle/bundle.js

このような画面が表示されれば成功! f:id:souki-paranoiast:20190318224906p:plain

これで、jsとcssの複数ファイルをビルドできるようになった。 とりあえずはこれでOKなのだが、次はこれをnpm script化していく。 といっても、これだけなら./node_modules/.binを消すだけなので、クロスブラウザ対応なんかも少し入れてみようと思う。