Vue、reactproject。env環境変数の原理分析

Vue、reactproject。env環境変数の原理分析

前書き：

.envファイルの拡張子はvue、reactプロジェクトの環境変数は、私たちはもっとアップで使用されている、と考えているvueとreactのcliこれらを構成した場合、すべては私たちが直接することができますが、別のフレームや別のプロジェクトでは、この問題は多くの問題です。

例えば、今書いAnt Design Proたプロジェクトを、それが内部的に使用するためであるumiこれらの設定を行うには、デフォルトではサポートしています.env私がサポートしたいというファイルを.env.developmentして.env.production行うためにどのような環境変数の他のモードをか？もちろん、海@ 3を使用することができconfig.dev.js、config.jsそしてconfig.prod.jsこれらのファイルが結合されUMI_ENV、これらの問題を解決するために、私は非常に動揺を感じます。

nuxtプロジェクトを書き始めて、構成ファイル内のプロジェクトnuxt.config.jsもenv:{}オブジェクト拡張のみをサポートしていることがわかりました。問題は、環境変数のその他のモードをどのようにサポート.env.developmentしたいの.env.productionかということです。

プロジェクトの変更を制御できないため、現状を維持するという原則に従ってvue、envファイルがどこにロードされているかを把握できます。

これが解決策です。

1.新しい.env.developmentファイルを作成します

NODE_ENV=development
VUE_APP_WEB_TITLE=test
VUE_APP_BASE_URL=http://0.0.0.0

2.コア実装、envファイルの解析

最初に依存関係をインストールします
dotenv
dotenv-expand

vue-cliソースによると
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/util/resolveClientEnv.js
rewrite

parseEnv.js

const fs = require('fs')
const path = require('path')
const dotenv = require('dotenv') // 解析.env.*文件为键值对，并写入环境变量。
const variableExpansion = require('dotenv-expand') // 拿到dotenv解析的参数，扩展计算机上已经存在的环境变量（存在就赋值）。

const resolve = dir => path.join(__dirname, dir)
const prefixRE = /^VUE_APP_/

/*
这里加载的是development 模式文件，需要其他的可以根据启动参数来动态修改，或者NODE_ENV来修改

ag：根据NODE_ENV来修改
const env = variableExpansion(
  dotenv.parse(fs.readFileSync(resolve(`./.env.${process.env.NODE_ENV}`)))
)
*/
const env = variableExpansion(
  dotenv.parse(fs.readFileSync(resolve(`./.env.development`)))
)
Object.keys(env).forEach(key => {
    
    
  if (prefixRE.test(key) || key === 'NODE_ENV') {
    
    
    env[key] = JSON.stringify(env[key]) // JSON.stringify 的目的是为了给webpack.DefinePlugin 的值是 '"development"'，DefinePlugin插件配置要求
  } else {
    
    
    Reflect.deleteProperty(env, key)
  }
})

module.exports = env

3. Webpackを構成し、環境変数をプロジェクトに挿入します

const webpack = require('webpack')

// 加载.env.* 环境变量
const env = require('./parseEnv')

console.log(env) // {NODE_ENV: '"development"',VUE_APP_WEB_TITLE: '"test"',VUE_APP_BASE_URL: '"http://0.0.0.0"'}

module.exports = {
    
    
  plugins: [new webpack.DefinePlugin({
    
     'process.env': env })]
}

4.使用する

console.log(process.env.VUE_APP_BASE_URL) // 'http://0.0.0.0'

参照リンク

1. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js

2. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/util/resolveClientEnv.js