Webpackマルチ環境(dev stg prd qa)パッケージの問題

前後に分離されたプロジェクトに対して,マルチ環境導入時に,異なる環境のフロントエンドでそれぞれ呼び出されるバックエンドインタフェースが異なり,どのように実現するのか.

1.スクリプト入力場所からの環境情報

  "scripts": {
    "build:dev": "cross-env NODE_ENV=dev node build/build.js",
    "build:stg": "cross-env NODE_ENV=stg node build/build.js",
    "build:prd": "cross-env NODE_ENV=prd node build/build.js",
    "build:qa": "cross-env NODE_ENV=qa node build/build.js"
  }
  "devDependencies": {
	"cross-env": "^5.0.1"
   }	

ここでcross-envによりNODE環境の設定が行われ、ここでbuild/build.jsはwebpackの構成である

2.webpack構成

plugins: [
    new webpack.DefinePlugin({
      __ENV__: JSON.stringify(process.env.NODE_ENV)
    })
   ]

webpackにおいて、webpackプラグインDefinePluginによって、コンパイラにおいて、対応する環境情報(dev stg prd qa)が格納されるグローバル環境変数__ENV__を作成することができる.

3.コード内の構成

api.config.js

/* eslint-disable */
const env = __ENV__ || 'dev'; //  dev
const pdfParse = {
    dev: '...',
    stg: '...',
    prd: '...',
    qa: '...'
}
const api = {
    pdfParse: pdfParse[env]
}
export default api;

4.コードの呼び出し

import axios from 'axios';
import api from '../../api.config.js';
const BACK_END_URL = api.pdfParse + '/parse/';
axios.get(BACK_END_URL).then(...).catch(...);

これにより、異なるnpmスクリプトを実行することで、異なる環境のパッケージ配置が可能になります.例えば、npm run build:devがパッケージ化された後にdev環境を配備することができ、その呼び出しのバックエンドインタフェースはapi.config.jsに構成されたdevのアドレスである.