endokのブログ

IT・プログラミングネタ

webpack+TypeScript環境でnode-configを使う

微妙にハマったので書く。
型定義をちゃんとしない、意識低い系の導入方法。

環境

  • webpack 4.29.6
  • typescript 3.4.1
  • eslint 5.16.0
  • config(node-config) 3.1.0

node-configのインストール

何はともあれインストール。
npmでインストールする。

npm install --save config

設定ファイルを追加しておく。(設定ファイルの命名ルール等はnode-config公式を参照のこと)

config/default.json

{
  "Customer": {
    "dbConfig": {
      "host": "prod-db-server"
    },
    "credit": {
      "initialDays": 30
    }
  }
}

webpackで使えるようにする

公式に記載がある通り、実行時に設定ファイルを読み込むため、そのままではwebpackで使えないとのこと。
いくつか選択肢が用意されているが、今回はOption1のDefinePluginを使った方法を利用。

webpack.config.jsに下記を追記する。

var webpack = require("webpack");

module.exports = {
  (中略)
  plugins: [new webpack.DefinePlugin({ CONFIG: JSON.stringify(require("config")) })]
};

"CONFIG"というグローバル変数にnode-configの設定オブジェクトを読み込む、といったことをしている模様。

TypeScriptで使えるようにする

グローバル変数として定義されているので、コード中で、

CONFIG.Customer.dbConfig.host

のようにすると設定を参照できる。

しかし、このままだとCONFIGという名前が見つからないというTypeScriptのコンパイルエラーが発生してしまう。
CONFIGの型定義が無いためだ。
ちゃんと補完が効くように型定義を書いてもよいのだけど、今回はとりあえず使いたいのでanyとして扱ってしまう。
型定義ファイルの配置フォルダ(自分の環境ではsrc/@types以下)に適当な名前で型定義ファイルを作成し、下記の内容を記載する。

src/@types/CONFIG.ts

declare var CONFIG: any;

これでコンパイルエラーが解消するはず。

ESLintのno-undefを回避する

自分の環境ではESLintも入れているので、下記チェックエラーが発生した。

error 'CONFIG' is not defined no-undef

eslintrcでグローバル変数にCONFIGを指定すればよい。
falseの場合、読み取り専用。

.eslintrc.json

  "globals": {
    "CONFIG": false
  }

ここまで終えて、webpack成功し、正常実行できるようになった。

終わりに

この話をもっとちゃんと解決するためのnpmパッケージも公開されている。
node-config-ts - npm
自分の場合は上記パッケージも試したもののうまく使えない部分があり、今回の記事の通り型安全でない解決法となってしまった。
このパッケージでうまくいくならそちらの方がいいと思います。

フロントエンド界隈をちゃんと理解できてないので、こういうちょっとしたものの導入でいちいち時間かかってしまうのが辛い。とはいえ試行錯誤することでにわか知識はついてきたので、このまま格闘していくのみ。