Webpack .env から変数を取り込んで HTML に渡して使いたい。

API KEY が必要な script タグを HTML に書く必要があって API KEY を直接書いたファイルを git にコミットしたくないので、gitignore した .env に変数として持たせて HTML に渡す方法のメモ

JavaScript で .env を使う

loadenv を使うと .env ファイルをオブジェクトとして読み込めるようです

.env ファイルを作成して使いたい変数を作る

$ touch .env

.env

API_KEY="API KEY"

.env ファイルをコミットしないように .gitignore に追加

.DS_Store
/node_modules
.env
!.gitkeep

loadenv のインストール

$ yarn add -D node-env-file

webpack での config 内で .env を使う

// webpack.config.js
const loadenv = require('node-env-file');

function getENV() {
  const { API_KEY } = loadenv('./.env');
  return {
    API_KEY,
  };
}

HTML に変数を渡すために pug を使う

webpack で HTML に変数を埋め込む方法が分からなかったので、JavaScript が使える pug を噛ませて HTML を出力することにしました。

pug で HTML を出力する

必要なパッケージのインストール

$ yarn add -D pug pug-loader html-webpack-plugin

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 中略

module.exports = (env, argv) => {
  const htmlTemplate = path.join('./src/index.pug');
  return {
    // 略
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: {
            loader: 'pug-loader',
          },
        }
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: htmlTemplate,
      })
    ],
  };
}

pug に変数を渡す

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const loadenv = require('node-env-file');


function getENV() {
  const { API_KEY } = loadenv('./.env');
  return {
    API_KEY,
  };
}

module.exports = (env, argv) => {
  const htmlTemplate = path.join('./src/index.pug');
  const ENV = getENV();

  return {
    // 略
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: {
            loader: 'pug-loader',
+           options: {
+             self: true,
+           }
          },
        }
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: htmlTemplate,
+       data: ENV,
      })
    ],
  };
}

pug で 渡された変数を使う

HtmlWebpackPlugin の data で渡される値は pug 内で self.htmlWebpackPlugin.options.data という形で取得できる。
.env ファイルにある API_KEY="API KEY" は次のような形で取得することができる。

- const API_KEY = self.htmlWebpackPlugin.options.data.API_KEY
html
  body
    script(src=`example.com/api?key=${API_KEY}`)

所感

pug 使わなくても webpack の output.publicPath みたいなオプションで .env から取った変数で変換できそうな気がする。できないものだろうか？

---

[参考]

• loadenv - npm
• Webpackを使ってJSでも.envしたい - Qiita
• webpack - Make variable accessible in all pug files - Stack Overflow
• 【脱gulp】webpackでpugを使う。jsonで一括ビルドも。 | 上間ウェブ店

森永製菓 inタブレット塩分プラス 80g×6袋

塩分…