LCL Engineers' Blog

バス比較なび・格安移動・バスとりっぷを運営する LCLの開発者ブログです。

最近1ヶ月間で行ったフロントエンド開発環境プチ改善

フロントエンドエンジニアの岡田です。 今日は、最近1ヶ月間に行った、フロントエンド開発環境のプチ改善についてお伝えします。 すべてLCLが運営するバス比較なびの改善です。

webpack-mergeパッケージ導入

以前はWebpackの設定ファイルを2つに分けていました。

  • webpack.config.js → ローカル開発環境用
  • webpack-production.config.js → 開発・本番サーバー用

この2つのファイルは重複する部分が多かったため、以下の問題がありました。

  • 片方の更新を忘れる(特に開発・本番サーバー用)
  • ファイル内に以下のようなコメントがあってイマイチ
  // ★★★★★ 重要 ★★★★★   
  // 以下の部分は、webpack-production.config.jsと同一にしておくこと   
  entry: {
    ・
    ・
    省略
    ・
    ・
  },
  // ★★★★★ 重要 ★★★★★    
  // webpack-production.config.jsと同一にしておく部分ここまで

そこで、webpack-mergeパッケージを導入しました。 このパッケージを使うと、重複部分を別のファイルにしてそれぞれのファイルから呼び出せます。

設定については以下の記事を参考にさせていただきました。

webpackで開発用/本番用の設定を分ける - Qiita

分割後のコードは以下のとおりです。

webpack.common.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    // エントリーポイントのファイルの設定
  },
  output: {
    // 出力ファイルの設定
  },
};

webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

 module.exports = merge(common, {
  mode: 'development',
  module: {
    rules: [
      // 省略
    ],
  },

   plugins: [
      // 省略
    ]
});

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

 module.exports = merge(common, {
  mode: 'production',
  module: {
    rules: [
      // 省略
    ],
  },
  plugins: [
      // 省略
  ],
}); 

スッキリ書けるようになって満足です☺

package.jsonをプロジェクトルート直下へ移動

以前はルート直下にfrontendというディレクトリを作って、その下でNode.jsを使っていました。

/frontend
├── node_modules
├── images
├── src
│   └── scripts       // React & ES2015ファイル
├── bs-config.js
├── package.json
├── webpack-production.config.js
└── webpack.config.js

2年ほどこの構成で続けてきましたが、以下の問題がありました。

  • frontendディレクトリ以外のファイルを触るときに、相対指定が面倒
  • 開発環境を起動するときにfrontendディレクトリへ移動するのが面倒
  • 他のサービスではルート直下でNode.jsが使えるので、バス比較なびだけルールが違ってややこしい

そのため、package.jsonをルート直下に移動しました。 また、Webpackやその他設定ファイル(.babelrc, .stylelintrc, .prettierrc等)もについても同様に移動しました。

基本的にはパスを書き換えるだけでしたが、意外と更新するファイルが多かったです。

  • package.json
  • webpack.config.js
  • .gitignore
  • 開発環境起動のためのシェルスクリプト
  • webpackビルドのRakeタスク
  • /node_modules 以下のファイルの直接参照箇所の書き換え
    react-calendarをレガシーブラウザ(Android4.x系)で使うために、intl.jsを入れる必要がありました。そこで、/node_modules/intl/locale-data/jsonp/ja.js というファイルを直接参照していました。こういうときに書き換えが発生するので、直接参照ではなく、別の方法で書いたほうが良さそうですね。

npm audit対応

先日、Node.js(npmも)をアップデートしたため、npm auditが使えるようになりました。 npm auditは、npm 6から使えるようです。

npm auditについては、以下のブログを参考にさせていただきました。
【node.js】npm@6にしたらnpm auditでpackageの脆弱性をチェックできるようになったメモ - tweeeetyのぶろぐ的めも

ローカルでnpm auditを実行したところ、highが1件あったため、アップデートしました。 アップデートのコマンドも出してくれて、親切ですね。

# Run  npm install react-scripts@2.1.3  to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Missing Origin Validation                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ webpack-dev-server                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-scripts                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-scripts > webpack-dev-server                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/725                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

react-scriptsは、react-google-mapsを使うために必要だったので入れています。 引き続き使うため、表示されたコマンドでアップデートしました。

npm install react-scripts@2.1.3

その後、npm run buildしたところ以下のエラーが出ました。

ERROR in ./node_modules/react-google-maps/lib/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "env" relative to directory "/プロジェクトパス/node_modules/react-google-maps"
    at /プロジェクトパス/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
以下省略

/node_modules/react-google-maps/package.json 中に以下のような記述がありましたが、babel-preset-envを入れていなかったのでエラーになっているようでした。

  "babel": {
    "plugins": [
      "lodash",
      "transform-class-properties",
      "transform-object-rest-spread",
      "transform-runtime"
    ],
    "presets": [
      [
        "env",
        {
          "targets": {
            "ie": 9
          }
        }
      ],
      "react"
    ]
  },
  "bugs": {
    "url": "https://github.com/tomchentw/react-google-maps/issues"
  },

そこで、babel-preset-envをインストールしたところ、エラーも消えて画面も正常に動作するようになりました。

感想

ずっと気になっていたプチ改善ができてスッキリしました。 開発環境周りは、なるべくストレスなく使える環境にしておきたいので、今後も定期的に見直していこうと思います。